Scroll-scrubbed hero with GSAP ScrollTrigger

A landing page hero where the headline splits and the product image rotates as you scroll, all generated in one pass.

GPT-5ChatGPTcode

Prompt

Build a single HTML file with a hero section for a headphone brand. Use GSAP 3 and ScrollTrigger from a CDN.
As the user scrolls the first 150vh:
1. The headline "Hear the room" splits into words that drift apart on the x axis.
2. A centered product image rotates from -12deg to 8deg and scales from 0.9 to 1.1.
3. The background moves from #F3EFE6 to #111.
Pin the section while this happens and scrub the timeline to scroll. Respect prefers-reduced-motion by skipping the animation.

Output excerpt · html

gsap.timeline({ scrollTrigger: { trigger: ".hero", pin: true, scrub: 1, end: "+=150%" } })
  .to(".word", { x: (i) => (i - 1) * 120 })
  .to(".product", { rotate: 8, scale: 1.1 }, 0);
Creator
WADYU sample
Added

More like this