Day 1: Exploring GSAP Basics and Timelines 🚀

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,
   });

1. Animating with Delay Add a delay for smoother animation sequences:

   gsap.from("#box2", {
       x: 800,
       y: 500,
       duration: 2,
       delay: 2,
   });

1. Combining Multiple Effects Enhance the animation with multiple transformations:

   gsap.to("#box", {
       rotate: 360,
       backgroundColor: "blue",
       borderRadius: "50%",
       scale: 0.75,
       duration: 2,
   });

---

🔁 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
});

---

🔄 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",
   });

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,
   });

---

🎯 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!