GSAP Animation Learning Module

Basic Animations

1. Basic Tween

The foundation of GSAP - animate any property

gsap.to("#box1", {
  x: 200,
  rotation: 360,
  duration: 2
});
                    

2. From Animation

Start from specific values

gsap.from("#circle1", {
  scale: 0,
  opacity: 0,
  duration: 1.5,
  ease: "back.out(1.7)"
});
                    

3. Set Properties

Instantly set values without animation

gsap.set("#box2", {x: -100});
gsap.to("#box2", {
  x: 100,
  y: 50,
  duration: 1
});
                    

4. Stagger Animation

Animate multiple elements with delay

gsap.from(".stagger-box", {
  y: -100,
  opacity: 0,
  duration: 0.8,
  stagger: 0.2
});
                    

Timeline Animations

5. Basic Timeline

Chain animations in sequence

const tl = gsap.timeline();
tl.to("#timelineBox1", {x: 100, duration: 1})
  .to("#timelineBox1", {y: 100, duration: 1})
  .to("#timelineBox1", {rotation: 360, duration: 1});
                    

6. Timeline with Labels

Control timing with labels

const tl = gsap.timeline();
tl.to("#timelineCircle1", {x: 150, duration: 1})
  .addLabel("midpoint")
  .to("#timelineBox2", {x: 150, duration: 1}, "midpoint");
                    

7. Repeat & Yoyo

Loop animations back and forth

gsap.to("#yoyoBox", {
  x: 200,
  duration: 1,
  repeat: 3,
  yoyo: true,
  ease: "power2.inOut"
});
                    

8. Text Animation

Animate text with TextPlugin

Hello GSAP!

gsap.to("#animText", {
  duration: 2,
  text: "Amazing Animations!",
  ease: "none"
});
                    

ScrollTrigger Animations

9. Scroll-triggered Animation

Animate elements as they enter viewport

gsap.to("#scrollBox1", {
  x: 200,
  rotation: 360,
  scrollTrigger: "#scrollBox1"
});
                    

10. Pinned Animation

Pin elements during scroll

gsap.to("#pinnedCircle", {
  scale: 2,
  scrollTrigger: {
    trigger: "#pinnedCircle",
    pin: true,
    scrub: 1
  }
});
                    

11. Parallax Effect

Create depth with different scroll speeds

gsap.to(".parallax-bg", {
  y: -100,
  scrollTrigger: {
    trigger: ".parallax-bg",
    scrub: true
  }
});
                    

12. Batch Animations

Animate multiple elements efficiently

ScrollTrigger.batch(".batch-item", {
  onEnter: elements => gsap.from(elements, {
    opacity: 0,
    y: 100,
    stagger: 0.15
  })
});
                    

Advanced Techniques

13. Morphing SVG

Transform SVG paths smoothly

gsap.to("#morphPath", {
  attr: {
    d: "M60,60 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0"
  },
  duration: 2,
  ease: "power2.inOut"
});
                    

14. Physics Simulation

Realistic motion with momentum

gsap.to("#physicsCircle", {
  x: 200,
  y: 100,
  duration: 2,
  ease: "bounce.out"
});
                    

15. 3D Transforms

Rotate in 3D space

gsap.to("#transform3D", {
  rotationX: 360,
  rotationY: 360,
  duration: 3,
  transformPerspective: 400
});
                    

16. Custom Easing

Create unique motion curves

gsap.to("#customEase", {
  x: 200,
  duration: 2,
  ease: "steps(12)"
});
                    

GSAP Animation Mastery