Today marks the beginning of an exciting new chapter as I embark on a 30-day journey to master GSAP (GreenSock Animation Platform). Over the next month, I'll be diving deep into the world of web animations, exploring the capabilities and potential of this powerful tool. Each day, I'll share my experiences, insights, and progress through daily blog posts. Join me as I take my first steps into the realm of GSAP and discover how to bring web pages to life with stunning animations. Let's get started on this animation adventure together!
What is GSAP?
GSAP (GreenSock Animation Platform) is a JavaScript library that allows you to create animations on your website. By leveraging GSAP, you can make your user interface more engaging and visually appealing.
What is Animation?
Animation involves moving objects, such as rotating boxes, sliding text, or changing backgrounds as you scroll. These dynamic effects enhance the interactivity and attractiveness of websites.
How to Use GSAP on Your Website?
To integrate GSAP into your website, you need to include the GSAP script in your HTML file. Here's how you can do it:
Open your web browser and search for "GSAP CDN."
Find a reliable source, typically the first or second result, which provides the GSAP script link.
Copy the provided script tag.
Ensure you place this script tag above your custom JavaScript files in the <head> or at the top of the <body> section of your index.html. If you place it after your custom scripts, GSAP won't work correctly.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/script.js"></script>
By following these steps, you'll successfully link GSAP to your website and be ready to start creating animations.
The GSAP Properties Today I Learned
duration: The length of time (in seconds) the animation takes to complete.
x: Moves the element horizontally by the specified number of pixels.
y: Moves the element vertically by the specified number of pixels.
rotation: Rotates the element by the specified degrees.
delay: Delays the start of the animation by the specified number of seconds.
repeat: The number of times the animation repeats after its first run.
yoyo: If set to true, the animation will reverse direction each time it repeats.
stagger: This property is used to create a delay between the start times of animations for multiple elements. It helps to create a more dynamic and visually appealing sequence of animations, making each element animate one after the other with a specified delay.
Box Animation
gsap.to(".box", {
duration: 2, // 2 seconds
x: 100, // Move 100 pixels to the right
y: 50, // Move 50 pixels down
rotation: 45, // Rotate 45 degrees
delay: 1, // Start after 1 second
//We can write Css Code but the Code should be in camelCase
overFlow: "hidden", //Css code
backgroundColor:"blue", //Css Code
borderRadius:"50%",//Css code
repeat: 2, // Repeat the animation twice
yoyo: true // Reverse the animation direction each repeat
});
Text Animation
gsap.from("h1", {
opacity:0,
color: "blue",
duration: 2,
delay: 1,
y: 20,
stagger: 1, //Delay each animation by 0.5 second
})
GSAP Timeline
A timeline allows you to sequence multiple animations and control their relative timing. It’s useful for creating complex animation sequences where you want precise control over the order and timing of animations.
let tl = gsap.timeline()
tl.to("#box1", {
x: 1000,
duration:1.5,
delay:1,
rotate: 360,
})
tl.to("#box2", {
x: 1000,
duration:1.5,
rotate: 360,
})
ScrollTrigger
ScrollTrigger is a plugin in GSAP that enables you to create scroll-based animations easily. It allows you to trigger animations based on the scroll position of the page, such as when an element enters or leaves the viewport, or at specific scroll points.
Example:
Ensure you have both GSAP and ScrollTrigger included in your project.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="/script.js"></script>
Simple use of scrollTrigger
gsap.from("#page2 #box", {
scale: 0,
repeat: 1,
duration: 2,
rotate: 360,
scrollTrigger: "#page2 #box"
});
//Dive Dripe scrollTrigger have properties
gsap.from("#page2 #box", {
scale: 0,
repeat: 1,
duration: 2,
rotate: 360,
scrollTrigger: {
trigger: "#page2 #box",
scroller: "#body",
markers: true,
start: "top 60%",
//More
},
});
Conclusion
Today, I learned how to use GSAP to create animations on websites. GSAP timelines helped me organize and control when different animations happen, making it easier to create complex sequences of movement, rotation, and other effects. I also learned about ScrollTrigger, which lets me start animations based on how far someone has scrolled on the page. This means I can make elements appear or move when they come into view, adding interactive and dynamic features to my website. These tools are helping me make my web pages more engaging and fun to explore.