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:


👉

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!