Page 4: Easing, Plugins, and Advanced Features

4. Easing, Plugins, and Advanced Features

Easing controls the rate of change in an animation's speed, making movements look natural and engaging. Plugins extend GSAP's core capabilities.

4.1. Using Easing Options

GSAP offers a wide range of Easing types (e.g., Power1, Sine, Back, Elastic). Easing adds a sense of physics to movement.

gsap.to(".bounce-box", { 
  duration: 1.5, 
  y: 200, 
  ease: "bounce.out" // Bounce out effect
});
gsap.to(".elastic-item", { 
  duration: 2, 
  rotation: 360, 
  ease: "elastic.out(1, 0.3)" // Elastic out effect
});

4.2. ScrollTrigger Plugin (Example)

ScrollTrigger is the most popular plugin, used to trigger or control animations based on scroll position. It must be included separately.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/ScrollTrigger.min.js"></script>
// ...
gsap.to(".header", {
  y: -100, // Hides the header upwards
  scrollTrigger: {
    trigger: "body",
    start: "top top", // When the scroll reaches the top of the body
    scrub: 0.5 // Smoothly links the animation to the scroll position
  }
});