A first-try, real workflow for a scroll-driven 3D hero — no motion designer, no code from scratch. Built step by step, in about 25 minutes.
This is the exact process I used the first time I tried it — no prior animation experience, no motion design background. If you're a business owner, a marketer, or someone branding businesses for clients, this is worth having in your back pocket: sites with a bit of motion and dimension are perceived as more premium, even when the underlying build time isn't dramatically different.
Ask ChatGPT for your "before" frame — the resting state of your subject or scene.
ChatGPTGenerate an image of [describe your subject/scene] in its resting/starting state. Style: [describe — e.g. "clean, minimal, soft studio lighting, centered composition"] This will be the "before" frame of a scroll animation, so keep the composition simple enough to animate from.
Ask for the "after" frame separately, referencing the first image so the style stays consistent.
ChatGPTGenerate an image of the same [subject/scene from the previous image], but in a transformed state: [describe the change — e.g. "zoomed in closer, rotated slightly, different lighting/mood"] Keep the same style, colors, and composition logic as the first image so the transition between them looks like one continuous shot, not two unrelated images.
Once both images exist, ask ChatGPT to describe the motion between them in plain language — this becomes your input for the video tool.
ChatGPTBased on these two images, write a short animation prompt describing the motion between them — camera movement, zoom, rotation, or lighting shift — in plain language, for use in an AI video tool.
Upload the start image, end image, and animation prompt into Google Flow. It generates the in-between motion as a short video.
Google FlowAnimate a smooth transition from the first image to the second image. [Describe the specific motion, e.g.: "Slow zoom out, camera pulling back, subject rotating slightly to the left, soft lighting shift from warm to cool."] Keep the motion slow and continuous, no fast cuts, cinematic pacing, 4-6 seconds.
Upload the video here, set frame extraction so you land around 30 frames total, download as a zip.
ezgifezgif.com/video-to-jpgUpload the numbered frames into Claude Code — or whatever AI coding tool you use — and ask it to build the scroll-triggered section.
Claude CodeI've uploaded a folder of numbered image frames (001.jpg to 0XX.jpg) that represent a video sequence. Build a scroll-triggered hero section that: - Renders these frames to a canvas element - Uses GSAP ScrollTrigger to scrub through the frames based on scroll position - Pins the section in place while scrolling through the animation, then releases to normal scroll after - Preloads all frames so there's no flicker/loading gap Keep it performant — no unnecessary re-renders on scroll.
Four things that'll save you a couple of frustrating loops on your first attempt.
Ask your AI coding tool to use GSAP's ScrollTrigger — it's the standard for scroll-linked animation and makes the frame transitions feel fluid instead of jumpy.
Expect a few rounds of adjusting the prompt and regenerating — treat it like directing, not a single request.
More frames (30+) reads smoother; fewer frames feels more like a slideshow. Match it to how premium you want the motion to feel.
Longer source clips mean more frames to manage and a heavier page — trim to just the motion you actually need.
Send me what you get — I want to see your first attempt too. Premium-feeling motion isn't reserved for studios anymore; it's just a workflow now.
— Meena