So machst du: €5K Scroll Animationen ohne code

@alan.buildz

15.7K followers · usually 10.0K views a post

Views

30.4K

Likes

1.5K

Comments

225

Shares

289

Selling · SaaS › AI Tool

Flowseen in 7 videos →

Why it worked

The video offers a practical, no-code solution to a visually appealing and potentially high-value service (scroll animations), leveraging popular AI tools and demonstrating a technique used by a major brand (Apple) to add credibility.

Summary

This video demonstrates how to create 5K scroll animations without coding, using tools like Google Flow, Ezgif.com, and Claude. It breaks down the process into four steps: generating start and end frame images, animating them into a clip, converting the clip to an image sequence, and finally using an AI coding tool to build the scroll-linked animation.

Structure

1Introduction to creating scroll animations without code
2Step 1: Generate images using Google Flow
3Step 2: Animate images into a clip using Flow
4Step 3: Convert clip to image sequence using Ezgif
5Step 4: Use AI tool (Claude) to build scroll-linked animation
6Mention of Apple using similar techniques and a CTA for a build guide

Original caption

Kommentiere „Build“ und ich schicke dir den Kompletten must have Build Guide mit allem was du zum Scroll Animationen für Websites wissen musst! #claude #claudecode #webdesign #claudeskills #websitedesign

More from @alan.buildz

Their other posts in the index, biggest breakout first.

Product placement

Flow: ACTS - it is an AI tool that generates images and animates them into a video clip. Removing it would change what happens in the video. Ezgif.com: ACTS - it is a website tool used to convert a video to an image sequence. Removing it would change what happens in the video. Claude: ACTS - it is an AI coding tool used to build a scroll-linked image sequence. Removing it would change what happens in the video. Apple: APPEARS - its product pages use this technique. Removing it would not change what happens in the video.

Call to action

Kommentiere "Build" und ich schicke dir den Build Guide + das komplette Tutrial

On-screen text

So machst du: €5K Scroll Animationen ohne code DU DIESE SCROLLANIMATION FÜR DIE AGENTUREN NORMALERWEISE EIN PAAR 1.000 EURO BEZAHLEN. OHNE ZU CODEN WEISST DU DIE WO DU SCROLLST DREHT SICH ODER BAUT SICH VON SELBST. SO ERSTELLST DU ES: Schritt 1 DU GEHST ZU Flow GENERIERST 2 BILDER MIT DIESEN PROMPTS. Startframe FÜR DEN START Endframe ANDERE FÜR DEN Schritt 2 END FRAME SCHRITT 2, IN FLOW WÄHLE LADE BEIDE BILDER HOCH UND FLOW ANIMIERT ALLES DAZWISCHEN ZU EINEM CLIP Schritt 3, DIESEN JETZT AUF EASY GIF, WÄHLST DORT VIDEO SEQUENCE STELLST 30 SEQUENZ STELLST 30 BILDER PRO SEKUNDE 1 ANSCHLIESSEND ALLE FRAMES ALS ZIP HERUNTER Schritt 4 GANZEN ORDNER, WIRF IHN IN DEIN AI CODING TOOL, ALSO CLAUDE UND DARAUS EINE BILDSQUENZ DIE AN SCROLLEN SO DASS DIE ANIMATION BILD FÜR BILD ABSPIELT WÄHRENDDESSEN DU DIESE TECHNIK BENUTZT APPLE AUF SEINEN PRODUKTSEITEN. Kommentiere "Build" und ich schicke dir den Build Guide + das komplette Tutrial JETZT DEN KOMPLETTEN BUILD GUIDE HABEN WILLST, DU DAZU WISSEN MUSST, সরঞ্জাম DANN KOMMENTIER EINFACH AUF JEDEN FALL ZU.

Transcript

Hier ist wie du diese Scroll Animation für die Agenturen normalerweise ein paar 1.000 Euro bezahlen. Ohne zu coden weißt du die Animation wo du scrollst dreht sich oder baut sich von selbst. So erstellst du es: Schritt 1, du gehst zu Google Flow und generierst 2 Bilder mit diesen Prompts. Eines für den Startframe und das andere für den Endframe. Schritt 2, in Flow wähle Frames to Video, lade beide Bilder hoch und Flow animiert alles dazwischen zu einem Clip. Schritt 3, diesen jetzt auf Ezgif, wählst dort Video to Image Sequence stellst 30 Bilder pro Sekunde ein und lädst anschließend alle Frames als Zip runter. Schritt 4, nimm jetzt diesen ganzen Ordner, wirf ihn in dein AI Coding Tool, also Claude und sag ihm daraus eine Bildsequenz, die an scrollen gebunden ist, so dass die Animation Bild für Bild abspielt währenddessen. Und übrigens, diese Technik benutzt Apple auf seinen Produktseiten. Also wenn du jetzt den kompletten Build Guide haben willst, mit allem was du dazu wissen musst, dann kommentier einfach Bild, mach sicher, dass du folgst und ich schicke dir auf jeden Fall zu.