Skip to main content

Animation

For animation of HTML elements, it is recommended to use GreenSock's GSAP library. A commented script tag for this library is included in the HTML boilerplate for all formats. Here are a few examples of how to use GSAP:

// move element(s) with classname 'element' 100px down, over 2 seconds
gsap.to('.element', 2, { y: 100 });

// move an element with id 'element-1' 100px up, over 1.5 seconds
gsap.to('#element-1', 1.5, { y: -100 });

// move an element with id 'element-1' 100px left and rotate it 45 degrees, over 2 seconds
gsap.to('#element-1', 2, { x: -100, rotation: 45 });

// fade out element 'textEl' over 0.5 seconds
var textEl = document.querySelector('#text');
gsap.to(textEl, 0.5, { opacity: 0 });

// set element(s) with classname 'element' to 50% scale
gsap.set('.element', { scale: 0.5 });

Easing​

Easing can easily by applied to your animations by adding an ease value. There are many preset easing functions, including quad, power1, bounce and back. Each one can be applied to the start of the animation, the end, or both; by appending .in, .out or .inOut respectively.

// animate element(s) using easing function quad applied to the end
gsap.to('.element', 2, { x: 100, ease: 'quad.out' });

A great tool to help with your gsap easing can be found here: GreenSock's Ease Visualizer.

Timelines​

Timelines allow you to join multiple animations. Here is an example of a timeline:

// Generate the timeline instance and store in a variable
var tl = gsap.timeline();

// Add animations to the timeline to move element(s) left 100px, then down 100px
tl.to('.element', 2, { x: 100 });
tl.to('.element', 2, { y: 100 });

Adding a parameter at the end affects the timing. By default, the next animation will begin when the previous one ends.

// This starts the animation 1 second earlier
tl.to('.element1', 2, { x: -100 }, '-=1');

// This starts the animation 1 second later
tl.to('.element1', 2, { x: -100 }, '+=1');

// This starts the animation exactly 3 seconds from the beginning
tl.to('.element1', 2, { x: -100 }, 3);

There are many more features of this powerful animation library. Please take a look at the gsap docs for full documentation.