See the Code - See it Full Page - See Details
_As of 12/10/2017 requires Firefox Nightly... or Chrome Canary 65+ with Experimental Web Platform Features flag enabled_ Using `composite: 'add'` as an option in a Web Animations API animation will cause the affected properties to add their values to any existing animations on the same property. Here we start with an animation that does a large rotation and then a `translateX` to push it out, causing a spiral. There is a horizontal guide with a tick for each point where the animated element will cross the line. Blue is the start tick in the middle, then it alternates between the yellow ticks on the left and the purple ticks on the right. The `composite`-y part of the demo comes in when you press the +/- buttons. This will start a second animation that goes from `translateX(0)` to `translateX(2vmin)` (or `-2vmin`) for one iteration, with a 1 second duration, a fill mode of `'forwards'`, and `composite: 'add'`. The distance between tick marks will remain the same, but it will cause the spiral to have a wider center as you increase the `translateX()`. The increase will be smooth and subtle in the animation, but you will notice the box never jumps into a new position, it continues its original `0` to `40vmin` translation and smoothly increases. The underlying reference will also animate to show how the spiral is affected as it too moves by `2vmin` with each button press with the same easing and duration as the added spiral animation. Note: As a convenience the transforms displayed on the screen on have one rotation and one translation. In reality, after three increases the true result would be `rotate(2880deg) translateX(40vmin) translateX(2vmin) translateX(2vmin) translateX(2vmin)` instead of the displayed `rotate(2880deg) translateX(46vmin)`. Both have the same visual result, and the former was easier to display and explain conceptually.
This Pen uses: HTML, CSS, JavaScript, and