Introduction to GSAP: A Beginner's Guide to Animating with GreenSock
Written by
Naveen Ninu
Front End Developer
Anjali Chanda
Front End Developer
Table of contents
Build with Radial Code
Share this
GSAP (GreenSock Animation Platform) is a robust JavaScript library for high-performance animations. It simplifies creating complex animations for web applications, ensuring smooth transitions and interactions.
Steps to Use GSAP in Your Web Projects
- Create Your HTML Structure:
Design your webpage with HTML elements that you plan to animate. This could be anything from text, images, and buttons, to complex div structures. - Include GSAP in Your Project:
Via CDN: To start using GSAP quickly without additional setup, add a script tag with the GSAP CDN link to your HTML file. - Write GSAP Animation Code:
Implement animation effects using GSAP’s intuitive methods. Specify duration, position, rotation, and scaling properties to animate your elements. - .to(): Animates elements from their current state to the specified end state.
- .from(): Animates elements from a given start state to their current state.
- .fromTo():Animates elements from the start state to the End state.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Example</title>
</head>
<body></body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Example</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</body>
</html>Basic Methods:
Definition of .to() :
The .to() method animates elements from a given start state to their current state.
.to(target, vars)Example: Move and Rotate an Element.
document.addEventListener("DOMContentLoaded", function() {
gsap.to(".box", { duration: 2, x: 300, rotation: 360, scale: 1.5 });
});Definition of .from() :
The .from() method animates elements from a given start state to their current state.
.from(target, vars)Example: Fade In an Element
document.addEventListener("DOMContentLoaded", function() {
gsap.from(".box", { duration: 2, opacity: 0, x: -200 });
});Definition of .fromTo():
The .fromTo() method animates elements from one state to another.
.fromTo(target, fromVars, toVars)fromVars: An object containing the initial animation properties and values.
toVars: An object containing the final animation properties and values.
Example: Animate from One State to Another
document.addEventListener("DOMContentLoaded", function() {
gsap.fromTo(".box", { opacity: 0, y: 50 }, { duration: 2, opacity: 1, y: 0 });
}); Definition of Easing:
Explore easing options to make animations more natural by adjusting the rate of change over time.
gsap.to(".box", { duration: 2, x: 300, ease: "bounce" });Definition of Staggering:
Animate multiple elements with a staggered delay, creating a cascading effect.
gsap.to(".box", { duration: 1, x: 100, stagger: 0.2 });ScrollTrigger
ScrollTrigger is a plugin from the GreenSock (GSAP) animation library that allows users to create animations based on the user's scroll position.
To use ScrollTrigger, include it in your project via CDN or npm.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>Example: Basic ScrollTrigger
Code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollTrigger with Markers</title>
<style>
body {
height: 200vh;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: {
trigger: ".box", // Element that triggers the animation
start: "top 80%", // Start point (element top to viewport 80%)
end: "top 20%", // End point (element top to viewport 20%)
markers: true, // Enable visual markers
},
rotation: 360, // Animation to rotate the box
duration: 2
});
</script>
</body>
</html>Example: Scrubbing
Scrubbing synchronizes the animation progress with the scroll position, so the animation progresses as the user scrolls.
JavaScript (main.js):
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: {
trigger: ".box",
start: "top center",
end: "bottom top",
scrub: true, // sync the animation with the scroll position
markers: true
},
x: 500
});
});Example: Pin and Scrub Together
Combining pinning and scrubbing can create more complex scroll-based animations.
JavaScript (main.js):
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
scrollTrigger: {
trigger: ".box",
start: "top center",
end: "bottom top",
scrub: 1, // smooth scrubbing
pin: true, // pin the element during the scroll
markers: true
},
x: 500
});
});Timeline
A GSAP Timeline (gsap.timeline) is a powerful feature that allows you to sequence multiple animations. You can create complex, orchestrated animations with a timeline by chaining multiple tween animations together. Timelines offer precise control over the timing and synchronization of your animations.
gsap.timeline(vars)vars: An object containing the configuration options for the timeline.
Example: Creating a Timeline
document.addEventListener("DOMContentLoaded", function() {
const tl = gsap.timeline({ defaults: { duration: 1 } });
tl.to(".box", { x: 100 })
.to(".box", { y: 100 })
.to(".box", { rotation: 360 });
});ScrollTrigger with Timeline
Example: Using ScrollTrigger with Timeline
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".box",
start: "top 80%", // start when the top of the box reaches 80% of the viewport height
end: "top 30%", // end when the top of the box reaches 30% of the viewport height
scrub: 1, // smooth scrubbing
pin: true, // pin the element during the scroll
markers: true // show markers for debugging
}
});
tl.to(".box", { x: 100 })
.to(".box", { y: 100 })
.to(".box", { rotation: 360 });
});Gsap.matchMedia()
Responsive, accessible animations and ScrollTriggers, here you come! gsap.matchMedia() allows you to place setup code within a function that runs only when a specific media query is met. When the query no longer matches, all GSAP animations and ScrollTriggers created during that function's execution are automatically reverted. This makes customizing for mobile/desktop or preferred-reduced-motion accessibility incredibly easy.
check more blogs on other topics here: https://blog.radialcode.com
So the structure looks like:
mm.add("(min-width: 800px)", () => {...}, myElementOrRef);Simplistic desktop/mobile example
let mm = gsap.matchMedia();
mm.add("(min-width: 800px)", () => {
// desktop setup code here...
});
mm.add("(max-width: 799.98px)", () => {
// mobile setup code here...
});Conclusion
GSAP (GreenSock Animation Platform) is a powerful tool for creating high-performance animations in web projects. Its intuitive syntax and extensive features make it easy to animate elements with precision and creativity. By following the steps to include GSAP in your project, creating your HTML structure, and writing animation code, you can bring dynamic interactions to your web applications. Advanced techniques like timelines, easing options, and ScrollTrigger provide greater control and flexibility for complex animations. Whether you're a beginner or an experienced developer, GSAP can significantly enhance the user experience on your website with smooth, professional animations.
