I recorded a 14-min tutorial on how I created this Scroll-based Animatd landing page. ❤️‍🔥Full Step-by-step tutorial, save it for later!

Roughly, the idea is: 1. Images from Freepik 2. Video via Kling 3. Break it into frames (ezgif) 4. Vibe coding with Antigravity --- Prompt: Cinematic Scrolltelling with Canvas & GSAP Goal: Create a cinematic "Scrolltelling" effect in a React (TypeScript) application. The core idea is to play an image sequence (video frames) based on the user's scroll position, creating a high-performance video-like illusion controlled entirely by the mouse wheel. Technical Stack: Framework: React (TypeScript) Styling: Tailwind CSS Rendering: HTML5 <canvas> Animation: GSAP (with ScrollToPlugin) Detailed Requirements: Frame Preloading & Loading State:Preload a sequence of 180 images (e.g., frame-001.jpg to frame-180.jpg) into a memory array before rendering starts. Implement a "Loading Screen" overlay that displays the real-time percentage of loaded frames. Canvas Rendering Logic:Use a fullscreen <canvas> element (fixed inset-0 w-full h-full). Create a drawFrame(index) function to render the specific frame to the canvas. Crucial: Implement a manual object-fit: cover logic using aspect ratio math so the images always fill the screen perfectly without distortion, regardless of window size. Include a ZOOM_FACTOR variable (e.g., 1.35) in the draw calculation to slightly zoom into the frames, effectively hiding any baked-in black bars or letterboxing. Scroll-to-Frame Mapping:Set the container height to 500vh to create a long scrollable area. Listen for the scroll event and calculate a scrollFraction (0 to 1) based on window.scrollY and the maximum scrollable height. Map this fraction to the frame index (0–179) and use requestAnimationFrame to trigger drawFrame for buttery-smooth performance. Interactive Mouse Parallax:Add a mousemove event listener. Use to smoothly shift the canvas position in the opposite direction of the mouse movement to create a sense of 3D depth. Apply a CSS scale: 1.05 to the canvas to ensure that its edges never become visible during the parallax offset. Performance & UX:Ensure the canvas handles window resizing dynamically. The background should remain solid black to maintain a cinematic atmosphere. Use GSAP's ScrollToPlugin for smooth programmatic navigation (e.g., "Scroll to Top" buttons).

what the fuck is the website supposed to be promoting lmao

This is awesome, appreciate the game!

14 minutes is a solid commitment. Can’t wait to see how you tackled the scroll animations.

Sounds awesome! A detailed tutorial is always a win. Can't wait to check it out and level up my skills!

u cooked legend🔥🔥 impressive

Damn bro this rockstar shyt right here 🤟🏿

Amazing. Will try this

Damn this is so good 👏👏

Solid execution on both the visuals and the teaching.

that's a fire landing🔥

I love it

good one

Legit🏅

Thanks for the tutorial. It was really helpful. I have a question though, how do you find clients?

stunning!

Way this scroll-driven sequence flows through the canvas is absolute butter. The frame mapping is so clean. Insane work by @viktoroddy ⚡️

This Looks amazing

Nice work and thank you for sharing

😎

Really nice!

thank you!!!

Awesome! Save it for later!

Thanks a lot! I went through it a few times and learned a ton

whats the font in the beginning

Love this tutorial, thanks for sharing it!

The prompt is blurry on my side ,can anyone please just write it here or send a clear screenshot -thanks in advance 🙏🙏