DEV Community

Cover image for Day 1: Exploring GSAP Basics and Timelines 🚀
Ashish prajapati
Ashish prajapati

Posted on

Day 1: Exploring GSAP Basics and Timelines 🚀

#webdev #javascript #beginners #tutorial

Welcome to my GSAP learning journey! In this series, I'll share my progress as I explore the GreenSock Animation Platform (GSAP). Today, I started with the basics of GSAP's animation capabilities, focusing on gsap.to, gsap.from, and timelines.

🟢 GSAP Basics: to and from

GSAP provides intuitive methods for creating animations:

  1. Animating Properties Animate the position, rotation, color, and scale of an element: 
 gsap.to("#box", { x: 500, y: 500, duration: 2, });
Enter fullscreen mode Exit fullscreen mode
  1. Animating with Delay Add a delay for smoother animation sequences: 
 gsap.from("#box2", { x: 800, y: 500, duration: 2, delay: 2, });
Enter fullscreen mode Exit fullscreen mode
  1. Combining Multiple Effects Enhance the animation with multiple transformations: 
 gsap.to("#box", { rotate: 360, backgroundColor: "blue", borderRadius: "50%", scale: 0.75, duration: 2, });
Enter fullscreen mode Exit fullscreen mode

🔁 Looping and Yoyo Effects

Create infinite loops and oscillating animations using repeat and yoyo:

gsap.to("#box", { x: 1200, rotate: 360, delay: 1, duration: 2, repeat: -1, // Infinite loop yoyo: true, // Reverses animation });
Enter fullscreen mode Exit fullscreen mode

🔄 Managing Complex Animations: GSAP Timelines

Timelines allow chaining animations for better control and synchronization. Here’s how I created a sequence of animations:

  1. Simple Timeline 
 var tl = gsap.timeline(); tl.to("#box", { x: 1000, rotate: 360, duration: 2, backgroundColor: "blue", }); tl.to("#box2", { x: 1000, rotate: 360, duration: 2, backgroundColor: "lightblue", }); tl.to("#box3", { x: 1000, rotate: 360, duration: 2, backgroundColor: "lightgreen", });
Enter fullscreen mode Exit fullscreen mode
  1. Animating Navigation Elements I also used timelines for staggered animations of a navigation bar: 
 var tl = gsap.timeline(); tl.from(".logo", { y: "-30px", opacity: 0, duration: 1, delay: 1, }); tl.from(".links h4", { y: "-30px", opacity: 0, duration: 1, stagger: 0.5, }); tl.from(".main", { y: "-30px", opacity: 0, duration: 1, scale: 0.3, });
Enter fullscreen mode Exit fullscreen mode

🎯 Key Takeaways from Day 1

  • gsap.to animates from the current state to the target state.
  • gsap.from animates from the target state to the current state.
  • Timelines simplify the creation of synchronized animations.

🎨 Final Project Demo

Check out the live demo of what I created on Day 1:

👉 Day 1 GSAP Demo

📂 GitHub Repository

Explore the source code for the Day 1 project on GitHub:

👉 GitHub: GSAP Basics

This is just the beginning! In the coming days, I'll dive deeper into advanced GSAP features. Stay tuned for Day 2! 🚀

Let me know what you think and share your tips in the comments below!

Top comments (0)