GSAP Animations

Create production-ready GSAP animations with ScrollTrigger, SplitText, and other plugins. Build scroll effects, text animations, hero entrances, and micro-interactions.

Build web animations with GSAP (GreenSock Animation Platform). The skill covers core concepts, timing functions, and the plugin ecosystem—producing smooth, performant animations that work across browsers.

gsap.from('.hero', {
  scrollTrigger: {
    trigger: '.hero',
    start: 'top 80%',
    end: 'top 20%',
    scrub: 1
  },
  opacity: 0,
  y: 100,
  duration: 1,
  ease: 'power3.out'
});

const split = new SplitText('.headline', { type: 'words' });

gsap.from(split.words, {
  opacity: 0,
  y: 50,
  rotationX: -40,
  stagger: 0.1,
  duration: 0.8,
  ease: 'back.out(1.7)'
});