Skip to main content

Skill Playground

Test skills with live AI responses. 3 free runs remaining.

Select a skill

GSAP Animations

Development

Details

Your prompt

Create a scroll-triggered fade-in animation for a hero section

✦

AI response

Here's a GSAP ScrollTrigger animation that fades in your hero section as the user scrolls:

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

The animation produces a smooth fade-in effect with upward movement as the hero section enters the viewport.