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.


playT3

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