Pure CSS animation with graphics and mix blend mode

Introduction

This was my first attempt at a timeline animation. A friend of mine (Chris Cleary) asked me to look into adding an animation on his landing page. We decided in the end not to publish it but I learnt a good deal in the process.

Using mix-blend-mode to get around an issue

One of the trickiest parts of what I was trying to achieve was the green section that intersects the blue and yellow ‘C’s. I’d created a shape in Photoshop and was in the process of absolutely positioning it when it struck me that there had to be a way to blend the colours. Enter mix-blend-mode and using the images colours themselves to create the green part.

mix-blend-mode: multiply;

By adding the multiply to both green and yellow images the bleed through blend is the desired green (or at least an approximation that was close enough.)

Smooth easing-function timing with cubic-bezier

A large part of what I like about the routine is the timing to add fluid natural motion. This was achieved with the Cubic Bézier easing function which smoothes down the start and end of the interpolation. Check out the demo files which you can download and play with to add and try out your own values.

Accessibility, prefers Reduced Motion

What if the user has set a preference for Reduced Motion? In this case the animation and Refresh Animation button are removed. There is also some warning text indicating that the animation will not work. Give it a try, set prefers-reduced-motion in your System Settings (Accessibility > Display > Reduce Motion) and see what happens here…

Download sample code

I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.

That’s all folks

Whilst the original code was never released into the wild I’ve added this to hopefully inspire others to give timeline animations a try.

The coding was never finished and requires optimisation including swapping PNGs for SVGs. If you create something you’re happy with please let me know so I can take a look (and continue learning.)