Make scroll animation with Claude

@jwang_ai

9.3K followers · usually 768 views a post

Views

3.8K

Likes

110

Comments

7

Shares

22

Selling · SaaS › AI Tool

Kie AIseen in 2 videos →kie.ai ↗

Why it worked

The video provides a practical, step-by-step tutorial on creating a visually engaging scroll animation using AI tools, which is a relevant and in-demand skill for web design and marketing. The use of AI for both image and video generation showcases efficiency and innovation, appealing to a tech-savvy audience.

Summary

The creator demonstrates how to create a scroll animation for a product using AI tools. They first find images of the product, then use an AI image generator (Nano Banana 2) to create an exploded view, and finally use an AI video generator (Kling 3.0 on Kie AI) to animate the scroll effect by breaking the video into frames.

Structure

1Introduction to creating scroll animations with AI
2Finding and generating product images
3Using Kie AI for image generation (Nano Banana 2)
4Using Kie AI for video generation (Kling 3.0)
5Demonstration of the final scroll animation
6

Original caption

How to build scroll animation with Claude. #claudecode #scrollanimation #webdesign

More from @jwang_ai

Their other posts in the index, biggest breakout first.

Call to action to try it and follow for more

Product placement

The video demonstrates using Kie AI (kie.ai) as a platform for AI image and video generation. It specifically mentions and uses Nano Banana 2 for image generation and Kling 3.0 for video generation to create a scroll animation.

Call to action

So now it's your time to try something new today and follow for more.

On-screen text

Make scroll animation with Claude I made this scroll animation for a client to showcase the product on their website and I'm going to show you exactly how I did it you first find an image of product that you are selling and then you have to find an image what of to show what it looks like inside of your product or use AI to generate it I use K I e dot AI it's pay per use so you're not paying monthly subscription so I personally don't write prompts I always get AI to write it for me so I upload 3 images and tell them what I'm trying to do and the AI will give you a prompt that you can copy and paste into or the image generation AI I'm using Nano banana 2 to generate this exploded image of the product so I give it the original image and the two reference images that shows the inside of the product and I just paste the prompt that was generated by Claude one thing I would advise is that you're not going to get the perfect image the first time using AI what you need to do is to trial and error and feed the image back to Claude or chat GPT and ask it to adjust the prompt the image that I used on on the website took what cost me about $20 in credit usage after two tries I got this image I'm only 50% satisfied but it's good for the demo now I'm going back to KI E and use clean 3.0 to generate the the video now I have the start frame and the end frame and the prompt that was generated by Cod I just feed it into KI E and ask it to generate the video for me after a few minutes the video is being generated and you can see it's pretty decent but it does require some editing let's go back to Claude and ask it to create scroll animation what you're going to do is it's gonna break the entire video down into hundreds of frames so when you scroll up and down it just switching or flipping through the frames and that creates a scroll animation so now it's your time to try something new today and follow for more

Transcript

I made this scroll animation for a client to showcase the product on the Web page and I'm going to show you exactly how I did it. You first find an image of product that you're selling and then you have to find an image what to show what it looks like inside of your product or use AI to generate it. I use KI. AI is pay per use so you're not paying monthly subscription. So I'm personally don't write prompts. I always get AI to write it for me so I up go three images and tell them what I'm trying to do and the AI will give you a prompt that you can copy and paste into or the image generation AI. I'm using Nano Banana 2 to generate this exploded image of the product. So I give it the original image and a two reference images that shows the inside of the product. And I just paste the prompt that was generated by cloud. One thing I would advise is that you're not going to get the perfect image the first time I'm using AI. What you need to do is to try and air and feed this image back to cloud or TBT and ask it to adjust the form. The image that I used on on the website took what cost me about $20 in credit usage. After two tries, I got this image, I'm only 50% satisfied, but it's good for the demo. Now I'm going back to K and use clean 3.0 to generate the the video. Now I have the star frame and the M frame and the prom that was generated by code, I just feed it into KEI and ask it to generate the video for me. After a few minutes, the video is being generated and you can see it's pretty decent, but it does require some editing. Let's go back to code and ask it to create scroll animation. What you're going to do is it's going to break the entire video down into hundreds of frames. So when you scroll up and down, it just switching or flipping through the frames and that creates a scroll animation. So now it's your time to try something new today and follow for more.