A helpful resource of what I've learned using HTML5, CSS3 and GSAP.js
Move a box from left to right and control it with a toggle play / pause button.
... and then back again.
Start an animation with a play button and control it with 4 other parameters.
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.
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.
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.
Tween a Div's height paramater