Filmora
Filmora - AI Video Editor
Edit Faster, Smarter and Easier!
OPEN
Filmora Video Editor
Effortlessly create video with AI.
  • Various AI editing tools to increase your video creation efficiency.
  • Offer popular templates and royalty-free creative resources.
  • Cross-platform functionality for editing everywhere.
Edit Video for Free Edit Video for Free
qrcode-img
Scan to get the Filmora App
Sicherer Download 100% Security Verified | No Subscription Required | No Malware

How to Animate Image on Scroll and Text on Scroll?

Want to improve your website's user engagement? Learn how to animate text-on-scroll and image-on-scroll to make your website more enticing and achieve better conversions.

Liza Brown
Liza Brown
Dec 09, 24 • Proven solutions
How to Animate Image on Scroll and Text on Scroll?

An easy yet powerful editor

Numerous effects to choose from

Detailed tutorials provided by the official channel

Over the years, web designers have tried different tactics to make their websites visually engaging. From marquee tags to animated navigation bars, designers tried everything they could to enhance the overall visual appearance of their websites.

One such tactic - that even brands like Sony and Apple - followed was image-on-scroll and text-on-scroll animations.

Part 1 How to Make Scroll Image Animation Like Apple?

First, let's take a look at different ways to make scroll-image animation like Apple. An image-on-scroll animation is an animation playback that appears on images as you continue to scroll down a website. You can use multiple methods to implement scroll image animations on your website.

01Use Filmora

Wondershare Filmora Video Editor is a feature-packed video editing tool that's designed to help video editors create high-quality videos in a hassle-free manner. The tool offers a timeline-based interface that streamlines the entire video editing process and helps professionals execute complex video editing tasks in no time. In addition to its basic editing features, Filmora also offers advanced editing functions including color grading, motion tracking, and keyframing. It means you can easily turn your RAW footage into high-quality videos without any hassle.

Using Wondershare Filmora to animate images on scroll will be an ideal solution if you want to integrate a visually appealing element to your website. Let's walk you through the step-by-step procedure of using Wondershare Filmora to create image-on-scroll animations.

Wondershare Filmora - Best Video Editor for Mac/Windows

5,481,435 people have downloaded it.

Build unique custom animations without breaking a sweat.

Focus on creating epic stories and leave the details to Filmora's auto features.

Start a creative adventure with drag & drop effects and endless possibilities.

Filmora simplifies advanced features to save you time and effort.

Filmora cuts out repetition so you can move on to your next creative breakthrough.

Step 1 - Launch Filmora on your system and import the video/image that you want to edit. Then, load the selected file to Filmora's timeline to proceed further.

Step 2 - Now, double-tap the video/image. This will launch the editing panel on your screen. Here, switch to the "Animation" panel.

animation presets filmora

Step 3 - Here you can either select "Presets" or click the "Customize" tab to create a custom animation through keyframing.

load-preset filmora

Step 4 - If you want to save time, however, it would be better to choose the "Presets" tab. Then, select the preset that you want to use.

Step 5 - Now, drag the selected preset to the timeline. Again, double-tap the preset layer. An editing panel will appear on your screen. Here you can adjust different elements of the preset to customize its playback.

adjust preset filmora

So, that's everything you need to know about animating image-on-scroll using Wondershare Filmora.

02Use ScrollSequence

Now, if you are not a professional editor or don't want to overcomplicate things, you can use ScrollSequence to add image-on-scroll animation to your website. For readers who don't know, ScrollSequence is a built-in WordPress plugin that you can directly install in your WordPress manager. The tool offers hundreds of ready-to-use animation templates that you can integrate and customize without any hassle.

All the templates offer complete customization, which means you can adjust the animation playback, import your own media files, and even customize the text. It's worth understanding that this method will only work if you are using WordPress as the CMS platform for your website. ScrollSequence is only available as a WordPress plugin and you won't be able to use it with any other website builder

03Write Your Own JavaScript Code

Finally, you can also write your own JavaScript code to animate image-on-scroll. However, this method will be a bit complicated as you would require technical expertise to write dedicated JavaScript scripts to animate image-on-scroll. If you choose this solution, you'll have to start with writing HTML and CSS codes. This will help you style your web page in the beginning. And, once the web design is up and ready, you can move towards writing the JavaScript code to animate image-on-scroll in your web page.

Part 2 How to Create a Scrolling Text Animation (Infinite Loop)

Like image-on-scroll, text-on-scroll is another popular way to add visually appealing animations to your web designs. Text-on-scroll animations work the same way as image-on-scroll animations - the only difference is that these types of animations focus on the text playback instead of images. Again, you can use different methods to animate text on scroll and make your website's content run in an infinite loop.

Some of these methods include:

01Use Filmora

Thanks to Filmora's advanced editing panel, you can also use it to animate text within the videos. This will be an ideal solution for users who want to add videos with dedicated text banners and titles on their websites. With Filmora, you'll be able to animate the text and make custom transitions in a hassle-free manner. Let's walk you through the detailed procedure of using Wondershare Filmora to add text animation to your videos.

Step 1 - Open Filmora on your system and load the video into its timeline.

Step 2 - Double-tap the video file, and switch to the "Titles" tab. You'll see a list of different title templates on your screen. Browse through these results and drag the desired template to the timelines. Make sure to adjust the title layer right above the video layer.

choose title template filmora

Step 3 - Again, double-click the title layer and you'll see a dedicated text editor on your screen. Here enter the text that you want to display within the video. You can also select text size, orientation, and font to personalize its appearance.

Step 4 - Finally, switch to the "Animation" tab at the left sidebar. Choose any of these animation templates and the text within the video will be animated automatically.

animate title filmora

So, that's how you can use Filmora to animate text-on-scroll to improve the overall visual appearance of your website videos.

02Scroll-Text-Animations for Single Words

Another way to implement scroll-text animations is to modify the HTML & CSS code of your website. Again, this method will only be feasible if you have prior coding experience and know how to write well-optimized code.

one line animations

The easiest way to animate text scrolls is through single-line animations. In this situation, only one line gets displayed at any particular time, which automatically gets switched to the next one as soon as you scroll down the cursor. If you are planning to create simple text-based animations, this method will help you get the job done easily.

Key Takeaways from This Episode

You can animate image-on-scroll and text-on-scroll to enhance the overall visual appearance of your websites and make them more engaging for the end-users.

If you are planning to upload dedicated videos on your website, you can use Wondershare Filmora, a fully-functional video editing tool, to animate both images and text through an easy-to-navigate editing panel.

You should only opt for the coding method if you are an experienced coder and have worked on HTML/CSS/JavaScript projects in the past.

You May Also Like

10 Tips and Tricks to Better Use Pixlr Editor

Pixlr is one of the top-notch photo editors that help non-technical individuals in gaining professional touch in the images. Read this article to get more details to use Pixlr photo editor.

Posted byMax Wales|2025-02-11 11:33:50
Top 5 Social Media Logo Animation

Animated logos engage users than normal logos and give a strong first impression. We start with the article with examples like the instagram animated logo and other social media, then give 5 ways to optimize logo animation.

Posted byLiza Brown|2025-02-17 21:17:20
How to Use Emojis on Windows

If you ever wondered how to use emojis on Windows, or since when the emojis are around and what is their significance, you will find all your answers here.

Posted byRichard Bennett|2024-12-09 17:54:28
In-depth Study of Cartoon Painting Starts from Learning to Draw It

Have you ever thought about drawing cartoons? If yes, here is an idea of how to get started. So, keep reading to understand how to draw a cartoon painting.

Posted byLiza Brown|2024-12-09 17:54:28
10 Classical Animated Cartoon Types With Examples

We can also remember one or many of our favorite 90s cartoons which we would in our childhood staying glued to the TV. After a couple of decades, let us now check out 10 classical animated cartoon types with relevant examples.

Posted byLiza Brown|2024-12-09 17:54:28
Handy Tips from Adobe Animate Rigging Tutorial for All Learners

All you need to know about rigging from the adobe animate rigging tutorial! Read on to find every detail on it.

Posted byLiza Brown|2024-12-09 17:54:28
How to Animate - Adobe Animate Tutorial for All

Getting started with Adobe Animate? Check out different Adobe Animate CC tutorials and learn how to use Animate in different situations.

Posted byLiza Brown|2024-12-09 17:54:28