What are GSAP and ScrollTrigger?
GSAP is a Javascript library that helps you create performant animations. We can animate almost everything with it (CSS, SVG, Canvas, WebGL, colors, Vue...).
ScrollTrigger is a GSAP plugin that let you control how and when to run the animations.
Why using GSAP?
It's probably the most popular animation library. It works with all modern browsers, it's regularly updated, they have a very good community (check their forum if you need help) and you can easily find tutorials.
Here is an example with my other website DEZIGN4FUN :
All these elements are animated with GSAP & ScrollTrigger :
- the opening animation when you click in the burger menu (2 Divs)
- the bouncing words (2 Spans)
- the moving line (a SVG rectangle)
- The big symbol at the top (a background image)
- The unlimited symbol (an image)
- The buttons (CSS borders)
- And the menu links.
Note that for the looping animations (the bouncing effect, the line, the unlimited symbol...), they are ONLY running when they are in the viewport.
As soon as they leave the viewport, they just pause...and resume when they come back.
It's the kind of control we can have with ScrollTrigger.
How to install them?
Go to the official website https://greensock.com/ and download the ZIP file.
Extract these 2 files : gsap.min.js and ScrollTrigger.min.js
The fastest and easiest way to load external files is to use the plugin Advanced Scripts : You can simply upload the files (or use a CDN link if you prefer).
You can also add some conditions, so the files will be loaded only on the pages you want.
Or you can also use the traditional method with the plugin my-custom-functionality.
How to use it with Oxygen?
We just have to target a selector (It can be an ID or a Class) :
And then we add some Javascript :
gsap.to("#logoanim1", {
duration: 2.5,
ease: "bounce.out",
rotate:360,
x:450
});
Did you see the following logo moving ? Probably not...
That's because the animation was running while you were reading the page (after the page was loaded actually).
That's why, in this case, we need ScrollTrigger :
gsap.registerPlugin(ScrollTrigger);
gsap.to("#logoanim2", {
duration: 2.5,
ease: "bounce.out",
rotate: 360,
x: 450,
scrollTrigger: {
trigger: "#logoanim2",
start: "bottom bottom",
end: "bottom top",
}
});
Now the following logo will be animated when the bottom of the image will reach the bottom of the page.
To use ScrollTrigger - which is a GSAP plugin - you have to load the library (obviously) but you also need to register the plugin, by adding this line :
gsap.registerPlugin(ScrollTrigger);
The JS code was simply put in a Code Block :
It was just a short introduction to understand the difference between GSAP and ScrollTrigger, and how to use them.
Check these following links to learn more about GSAP.
Resources
Getting Started with GSAP : Must read first!!!
GSAP 3 Cheat Sheet : Incredibly useful
Removing a Flash of Unstyled Content : You need to know about it
Most Common GSAP Mistakes
Most Common ScrollTrigger Mistakes
Tutorials & Demos
Creative Coding Club
MotionTricks
ScrollTrigger Demos
GreenSock on CodePen