Web_Designer_Issue_262_2017

NEW GENERATION CSS
WEB ANIMATIONS API
WHETHER YOU’RE ANIMATING IN CSS OR JAVASCRIPT, THEY WILL BOTH HARNESS
THE POWER OF THE SAME UNDERLYING ENGINE
There are so many methods out there when it
comes to animating on the web, from the old
days of Flash through to JavaScript with jQuery,
.animate(), then CSS3 and SVG and the
animate tag, birthing libraries like Velocity
and GreenSock.
The Web Animations API hopes to achieve a
mixture of all of these libraries and tools by
using the power and simplicity of CSS animations
and the flexibility of JavaScript to interact with
elements on the page, including SVG, leaving the
browser to deal with performance.
Basic usage of the API requires the use of
‘.animate’ inside of JavaScript. The ‘.animate’
call takes two parameters; an array of keyframes
and the timing properties for the animation. If
you’ve written CSS animation before this will
look really familiar.
element.animate([
{ transform: ‘rotate(0)’ },
{ transform: ‘rotate(360deg)’}
], {
duration: 5000,
iterations: Ininity,
direction: ‘normal’,
ill: ‘forwards’,
delay: 100,
easing: ‘linear’
});
The new API keeps the benefits gained from CSS,
like hardware acceleration, and adds more
tools such as variables, finer controls and
playback controls.
KEYFRAME EFFECTS
The new KeyframeEfect property in JavaScript
adds more power to the API, allowing for
animations to be modular and easily reused. The
property takes three parameters; an element, an
array of keyframes and timing properties. All of
these can be mixed into as many KeyframeEfect
properties as you want.
Above: A selection of the frames that make up the animation
CREATE A SIMPLE ‘LIKE’ ANIMATION
The animation we’ll be creating will consist of four
keyframes, increasing and decreasing the scale and
changing the colour of the SVG. We can also use
JavaScript to retrieve the values of Custom
Properties set in the CSS. Although this animation
could be created in CSS we’ll be using JavaScript to
familiarise ourselves with the Web Animations API.
01. HTML AND CSS SETUP
The HTML and CSS is really simple. It’s just a button
containing an SVG and some CSS to apply some
basic styling including some Custom Properties.
:root {
--colour-inactive: #a4a4a4;
--colour-active: #ff4848; }
02. GET OUR CUSTOM PROPERTIES IN JS
By setting the colours we’re going use in the
USE THE WEB ANIMATIONS API TO CREATE A SIMPLE SVG ANIMATION
animation as Custom Properties, we can then pull
them out in the JavaScript and use them in our
animation. To do this we need to set them as
variables in JavaScript.
var getCustomProperties = window.
getComputedStyle(document.
querySelector(“html”));
var colourInactive =
getCustomProperties.getPropertyValue(‘--
colour-inactive’);
var colourActive =
getCustomProperties.getPropertyValue(‘--
colour-active’);
03. SET THE KEYFRAMES
Next we’ll create a variable containing the
keyframes for our pop animation; we’ll do this using
the transform: scale() property. By shrinking the
element slightly first and then pushing it over the
initial size and back down, we’re creating an
animation that expresses joy and seems ‘happy’
when coupled with the animated colour change.
var keyframesPop = [
{ transform: ‘scale(1)’ },
{ transform: ‘scale(0.8)’, ill:
colourInactive },
{ transform: ‘scale(1.2)’ },
{ transform: ‘scale(1)’, ill: colourActive
}
];
04. SET UP THE TIMING PROPERTIES
Now we have our variable containing our
keyframes we need to create another variable
containing our timing properties. The duration is
set in milliseconds, the number of iterations, the
fill (which controls what happens when the
animation is finished) and the easing, which we
will set in cubic-bezier to give us greater control
over the easing.
var timingPop = {
duration: 750,
iterations: 1,
ill: ‘forwards’,
easing: ‘cubic-bezier(.61,-0.4,.69,1.32)’
}
50 ________________________________________________________________ feature