Tool 1

Move a box from left to right and control it with a toggle play / pause button.

... and then back again.

Tool 2

Start an animation with a play button and control it with 4 other parameters.

Tool 3

Control a timeline using an image instead of a button element.


Explanation: In this scenerio, no variable is defined for the orange play button... getElementById is used when setting up a function after timeline has been constructed.

Tool 4

A simple Masking technique

This text is being MASKED on.

Explanation: A div was created with the property overflow: hidden to act as a mask. The text was then moved in from outside of the div to reveal itself.

Tool 5

Text Animation using SplitText

This text has been animated on using SplitText

Explanation: Each character was put into its own individual div tag using SplitText and then the staggerFrom method was used to animate each div in one at a time.

Tool 6

Tween a Div's height paramater