GSAPGSAPScrollTriggerFadeScroll

Scroll-Triggered Fade In

Elements fade in and slide up as they enter the viewport using GSAP ScrollTrigger. Perfect for revealing content on scroll.

Preview

Scroll down to see elements fade in

Element 1

Element 2

Element 3

Element 4

Element 5

Code

import { useEffect, useRef } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

export function ScrollFadeIn({ children }) {
  const ref = useRef(null)

  useEffect(() => {
    gsap.fromTo(
      ref.current,
      { opacity: 0, y: 50 },
      {
        opacity: 1,
        y: 0,
        duration: 1,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: ref.current,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
        },
      }
    )
  }, [])

  return <div ref={ref}>{children}</div>
}

NextStaggered List Animation

Want to see more?

Browse the full collection of animation snippets and find your next inspiration.

View all animations Explore hub