Ajith k v

Home Hero Landing Scroll Animation

Component 708

About

Hero landing section with a 4-phase GSAP ScrollTrigger scroll animation: icons cascade up with stagger, scale and fly to center, fly to nav header placeholders, then headline text segments reveal randomly on scrub. Built with Swiper background slideshow and fully typed in TypeScript.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Home Hero Landing Scroll Animation to your project and fits it to your theme.

Code

How Home Hero Landing Scroll Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import PublishedComponent from "@/components/ui/home-hero-landing-scroll-animation"

export default function Demo() {
  return <PublishedComponent />
}

Dependencies

More by Ajith k v

View all
  • Hero Scroll Video Pin Reveal

    Hero Scroll Video Pin Reveal

    996
  • Lip-scroll-zoomin-animation

    Lip-scroll-zoomin-animation

    892
  • Inversion Circle Scroll Animation

    Inversion Circle Scroll Animation

    279
  • Landing scroll animation

    Landing scroll animation

    195
  • Reveal Text

    Reveal Text

    134
  • ImgText Reveal Scroll Animation

    ImgText Reveal Scroll Animation

    96
  • Text Animation

    Text Animation

    87
  • woodpeck-hero-landing-animation

    woodpeck-hero-landing-animation

    68