Animating HTML Gradients

Animating gradients should be a no-brainer, but surprisingly support is limited to SVG using SMIL or CSS, and Edge won’t even respond.

If we want to animate the gradient background style of HTML elements we need some JavaScript to tween the values. This is where the Plutonium Animator comes to the rescue.

Download the Animator Library from GitHub

We will be using the Plutonium React-State-Animator in a generic HTML page environment. However, you can also use the same principals and library to animate gradients in your React project.

Open the 'gradient.html' Sample

You can optionally follow along by opening the ‘gradient.html’ sample in the download.

Add the Animator Script

Add a link to the animator script in the head of your page. Choose the relative or CDN link below.


//relative link
<script src="lib/src/min/animator.js"></script>

//CDN link
<script src="https://cdn.jsdelivr.net/npm/react-state-animator@1/lib/min/animator.js"></script>

Create an Animator Instance


const animator = new PU_Animator({
    morph:true
});

Add a new animation

Next we will add a new animation to the animator instance. You can pass any element to the add method or an array of elements. The element in the sample is a simple centered div with the class name ‘.gradient’.

The second argument of the add method is the animation duration in seconds.


const gradientElm = document.querySelector('.gradient');
let animation = animator.add(gradientElm, 2, {
    backgroundImage:{
        keys:{
            from:'repeating-radial-gradient(closest-side at 50% 50%,rgb(140,255,54) 0%,rgb(0,0,0) 24%,rgb(255,255,255) 25%,rgb(0,0,0) 48%,rgb(140,255,54) 50%)',
            to:'repeating-radial-gradient(closest-side at 50% 50%,rgb(140,255,54) 50%,rgb(0,0,0) 74%,rgb(255,255,255) 75%,rgb(0,0,0) 99%,rgb(140,255,54) 100%)'
        }
    }
    },{
        timing:'linear',
        delay:'0s',
        direction:'normal',
        iterationCount:'infinite',
        fillMode:'both',
        playState:'running'
});

See the animator documentation for additional information and options.

The Animated Gradient!

See the Pen Gradient Animation Without SVG by plutonium.dev (@plutonium-js) on CodePen.37461

Gradient Component Values

The Animator strips each gradient string value down into it’s component numeric values in the order they appear. Animations only work as expected if the ‘to’ and ‘from’ gradients contain the same number of values in the same order.

Don’t use hexadecimals… color values must be in RGB or RGBA, but not in both. Named colors like ‘red’, ‘white’, etc… are safe to use and will not be tweened.

Animating From the Set Style

Be careful when animating from a set style already applied to an element. The browsers will typically reformat the applied style somewhat.

As an example, if the simple gradient below with RGBA colors was applied to an element as an inline style…


linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(255,255,255,1) 100%)

The browser will typically reformat the gradient and convert the unnecessary RGBA values to RGB.


linear-gradient(0deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)

Animating from this applied gradient which now has RGB colors to a gradient with RGBA colors will yield unexpected results because the component values no longer line up.

The safest bet is to simply define a from key value that mimics the applied style value.

Example With Play and Pause API Control

See the Pen Animated Gradient Examples Without SVG by plutonium.dev (@plutonium-js) on CodePen.37461