This time, we will not be looking at a new JavaScript framework, but at an animation library. Thanks to GreenSock, you can animate any element of the DOM using a set of tools.
To find out more about the latest update to the animation library, do read our article GSAP 3.
What does GreenSock offer?
GreenSock’s aim is to make animating code simple and intuitive; its distinctive feature is that it is easy to learn. It is made up of a set of tools, each with its own role:
- TweenLite: considered the “engine core”, this tool handles the animation of the object and the property of your choice. This tool is a Lite version, but it can be extended using optional APIs.
- TweenMax: a beefier version of TweenLite. It has the same capabilities as the engine core, but is also able to produce secondary features. TweenMax also has a small library of plugins such as CSSPlugin, which makes it possible to animate all the CSS properties of your HTML elements.
- TimelineLite: a must-have for animation, TimelineLite is a powerful sequencing tool that acts as a container for the chosen elements. It makes it possible to simplify the control of those same elements and to manage their synchronisation with one another precisely.
- TimelineMax: offers the same features as TimelineLite, but also other secondary features. You can find a list of these features here.
3 animations created with TweenMax!
Now that the explanations are over, it is time to move on to practice! Here are 3 examples of basic animations that can be created with TweenMax:
- SplitText: with this JavaScript element, you can split the characters of a text in order to animate them afterwards. In the case below, the text was split letter by letter, then animated with TweenMax.
See the Pen GSAP1 by Matthieu (@Matthieu87) on CodePen.
- Draggable: this TweenMax element makes it possible to create an element (here a block) and move it within a defined space.
See the Pen GSAP2 by Matthieu (@Matthieu87) on CodePen.
- CardWrapper: a function capable of flipping an element over and displaying content on it. Here, we used it to flip the Numendo logo over and display “Hello!” behind it.
See the Pen GSAP3 by Matthieu (@Matthieu87) on CodePen.
Did you enjoy the article? Do share it on social networks! If you would like to find out more about the digital world, discover our other articles.
For more articles, do take a look at our blog.
