Quick Start

JavaScript
// Hero fade-in with stagger
gsap.timeline()
  .from(".hero-title", { y: 60, opacity: 0, duration: 1 })
  .from(".hero-subtitle", { y: 40, opacity: 0, duration: 0.8 }, "-=0.5")
  .from(".hero-cta", { scale: 0.9, opacity: 0, duration: 0.6 }, "-=0.3");

// Scroll-triggered section reveal
gsap.registerPlugin(ScrollTrigger);
gsap.from(".section-content", {
  y: 100,
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: ".section-content",
    start: "top 80%"
  }
});

10 Most Common Marketing Animation Patterns

JavaScript
const heroTL = gsap.timeline();
heroTL.from(".hero-bg", { scale: 1.1, duration: 1.5, ease: "power2.out" })
      .from(".hero-title", { y: 80, opacity: 0, duration: 1 }, "-=1")
      .from(".hero-subtitle", { y: 60, opacity: 0, duration: 0.8 }, "-=0.6")
      .from(".hero-cta", { scale: 0.8, opacity: 0, duration: 0.6 }, "-=0.4");

JavaScript
gsap.utils.toArray(".reveal-section").forEach(section => {
  gsap.from(section, {
    y: 100,
    opacity: 0,
    duration: 1,
    scrollTrigger: {
      trigger: section,
      start: "top 85%",
      toggleActions: "play none none reverse"
    }
  });
});

JavaScript
gsap.from(".feature-card", {
  y: 80,
  opacity: 0,
  duration: 0.8,
  stagger: 0.2,
  scrollTrigger: {
    trigger: ".features-grid",
    start: "top 80%"
  }
});

JavaScript
gsap.to(".parallax-bg", {
  yPercent: -50,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

JavaScript
gsap.to(".counter", {
  textContent: 1000,
  duration: 2,
  ease: "power2.out",
  snap: { textContent: 1 },
  scrollTrigger: {
    trigger: ".stats-section",
    start: "top 70%"
  }
});

JavaScript
const sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".container").offsetWidth
  }
});

JavaScript
gsap.from(".image-reveal img", {
  scale: 1.3,
  duration: 1.5,
  scrollTrigger: {
    trigger: ".image-reveal",
    start: "top 80%"
  }
});

gsap.from(".image-reveal .overlay", {
  xPercent: 100,
  duration: 1,
  scrollTrigger: {
    trigger: ".image-reveal",
    start: "top 80%"
  }
});

JavaScript
// Requires SplitText plugin or manual spans
gsap.from(".split-text .char", {
  y: 100,
  opacity: 0,
  rotateX: -90,
  duration: 0.8,
  stagger: 0.02,
  scrollTrigger: {
    trigger: ".split-text",
    start: "top 85%"
  }
});

JavaScript
document.querySelectorAll('.cta-button').forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    gsap.to(btn, { scale: 1.05, duration: 0.3 });
    gsap.to(btn.querySelector('.btn-bg'), { width: '100%', duration: 0.4 });
  });
  
  btn.addEventListener('mouseleave', () => {
    gsap.to(btn, { scale: 1, duration: 0.3 });
    gsap.to(btn.querySelector('.btn-bg'), { width: '0%', duration: 0.4 });
  });
});

JavaScript
const pageLoadTL = gsap.timeline();
pageLoadTL.to(".loader", { opacity: 0, duration: 0.5, delay: 1 })
         .from(".main-content", { y: 50, opacity: 0, duration: 1 }, "-=0.3")
         .set(".loader", { display: "none" });

Webflow Integration Patterns

HTML
<!-- In Page Settings > Custom Code > Before </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// Your animations here
</script>

JavaScript
// Target elements with custom attributes
document.querySelectorAll('[data-animate="fade-up"]').forEach(el => {
  gsap.from(el, {
    y: 50,
    opacity: 0,
    duration: 1,
    scrollTrigger: { trigger: el, start: "top 80%" }
  });
});

document.querySelectorAll('[data-animate="scale-in"]').forEach(el => {
  gsap.from(el, {
    scale: 0.8,
    opacity: 0,
    duration: 0.8,
    scrollTrigger: { trigger: el, start: "top 80%" }
  });
});

Performance Optimization

JavaScript
// ✅ Good - Use transform and opacity
gsap.to(element, { 
  x: 100, 
  y: 50, 
  scale: 1.2, 
  rotation: 45,
  opacity: 0.5 
});

// ❌ Bad - Avoid layout-triggering properties
gsap.to(element, { 
  width: 200,
  height: 100,
  top: 50,
  left: 100
});

JavaScript
// Reduced motion check
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

if (!prefersReducedMotion.matches) {
  // Full animations
  gsap.from(".hero-title", { y: 80, opacity: 0, duration: 1 });
} else {
  // Simplified animations
  gsap.set(".hero-title", { opacity: 1 });
}

// Touch device detection
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

if (!isTouchDevice) {
  // Desktop-only heavy animations
  gsap.to(".parallax-bg", {
    yPercent: -50,
    scrollTrigger: { scrub: true }
  });
}

Workflow Checklist

Progress:

• Register required GSAP plugins (ScrollTrigger, TextPlugin)
• Set up performance media queries for reduced motion
• Implement hero section entrance animation
• Add scroll-triggered section reveals
• Create staggered animations for repeated elements
• Set up parallax effects for background elements
• Add hover states for interactive elements
• Test on mobile devices and adjust for touch
• Validate no layout-triggering properties are used
• Add fallbacks for reduced motion preferences

Best Practices

• Use transform and opacity only - Avoid width, height, top, left
• Set will-change: transform on animated elements in CSS
• Use ScrollTrigger's toggleActions for better performance than onUpdate
• Batch DOM reads/writes - Use gsap.set() for immediate changes
• Preload heavy assets before starting animations
• Use ease: "none" for scrub animations to avoid easing conflicts
• Test on low-end devices to ensure smooth 60fps performance

Common Pitfalls

• Don't animate layout properties (width, height, top, left) - causes reflow
• Don't use too many simultaneous ScrollTriggers - impacts performance
• Don't forget to kill() timelines when components unmount
• Don't use complex easing on scrub animations - causes janky scrolling
• Don't ignore prefers-reduced-motion - accessibility requirement
• Don't animate on every scroll event - use ScrollTrigger's built-in throttling
• Don't forget force3D: true for hardware acceleration on older browsers