Create scroll-triggered animations library.

Animation Types:
1. Fade In: Opacity 0 to 1 on scroll into view
2. Slide Up: Translate Y with fade
3. Scale In: Scale from 0.8 to 1
4. Stagger Children: Sequential child animations
5. Parallax: Different scroll speeds for layers
6. Progress: Animation tied to scroll percentage

GSAP ScrollTrigger Features:
- Scrub animations (tied to scroll position)
- Pin elements during scroll
- Snap to sections
- Horizontal scroll sections
- Batch animations for performance

Framer Motion InView:
- whileInView prop usage
- Viewport amount threshold
- Once vs repeat animations
- Custom variants

Performance Tips:
- Use Intersection Observer
- Debounce scroll handlers
- Transform-only animations
- Lazy load heavy animations

Related Prompts

View all

Smooth Page Transitions

Implement beautiful page transitions in Next.js. Transition Types: 1. Fade: Simple opacity transiti...

Page TransitionsFramer Motion

Delightful Micro-Interactions

Create a library of micro-interactions for UI polish. Button Interactions: - Ripple effect on click...

Micro-interactionsUX

Apple-Style Product Launch Page

Create a premium product launch landing page inspired by Apple's product pages. Visual Design: - La...

Product LaunchApple

Y Combinator Style Startup Landing

Create a clean, conversion-focused startup landing page inspired by Y Combinator portfolio companies...

StartupConversion

Back to prompts

Create scroll-triggered animations library.

Animation Types:
1. Fade In: Opacity 0 to 1 on scroll into view
2. Slide Up: Translate Y with fade
3. Scale In: Scale from 0.8 to 1
4. Stagger Children: Sequential child animations
5. Parallax: Different scroll speeds for layers
6. Progress: Animation tied to scroll percentage

GSAP ScrollTrigger Features:
- Scrub animations (tied to scroll position)
- Pin elements during scroll
- Snap to sections
- Horizontal scroll sections
- Batch animations for performance

Framer Motion InView:
- whileInView prop usage
- Viewport amount threshold
- Once vs repeat animations
- Custom variants

Performance Tips:
- Use Intersection Observer
- Debounce scroll handlers
- Transform-only animations
- Lazy load heavy animations