GSAP Animations: Creating Smooth, Professional Web Animations

GSAP (GreenSock Animation Platform) is the industry-standard JavaScript animation library. Let's explore how to create smooth, professional animations.

Getting Started with GSAP

GSAP provides a simple yet powerful API for animating anything:

import gsap from 'gsap';

// Basic animation
gsap.to('.box', { duration: 1, x: 100, opacity: 0.5 });

// From animation (starting point)
gsap.from('.box', { duration: 1, opacity: 0, y: 20 });

// Combining to and from
gsap.fromTo('.box', 
  { opacity: 0, y: 20 }, 
  { opacity: 1, y: 0, duration: 1 }
);

Timeline Animations

Timelines let you sequence animations:

const tl = gsap.timeline();

tl.to('.box1', { x: 100, duration: 1 })
  .to('.box2', { x: 100, duration: 1 }, '-=0.5') // Start 0.5s before box1 ends
  .to('.box3', { x: 100, duration: 1 });

Easing Functions

Easing creates natural motion:

• ease: 'power1.inOut' (simple)
• ease: 'power4.out' (aggressive)
• ease: 'back.out' (overshoot)
• ease: 'elastic.out' (bouncy)

Staggering Animations

Animate multiple elements with delays:

gsap.to('.item', {
  duration: 0.5,
  opacity: 1,
  y: 0,
  stagger: 0.1, // 0.1s between each animation
  ease: 'power2.out',
});

Scroll Animations

Trigger animations on scroll with ScrollTrigger:

gsap.registerPlugin(ScrollTrigger);

gsap.to('.element', {
  scrollTrigger: {
    trigger: '.element',
    start: 'top center',
    end: 'bottom center',
    scrub: 1,
  },
  rotation: 360,
  opacity: 1,
});

Performance Tips

• Use transform and opacity for best performance
• Avoid animating width/height
• Use GPU acceleration with will-change
• Throttle scroll events
• Kill animations when done

React Integration

Use GSAP with React safely:

import gsap from 'gsap';
import { useEffect, useRef } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { x: 100, duration: 1 });
  }, []);

  return <div ref={boxRef} className="box" />;
}

Conclusion

GSAP empowers you to create engaging, smooth animations that enhance user experience. With proper implementation, animations can make your website feel polished and professional.