Change the background color | Webflow animation

Tutorial
March 20, 2023
3 min
Preview of an animation on the BG color in Webflow with Weflow Tuto logo.
Use AI to summarize this article
Key points

In this easy and quick Webflow tutorial, you will learn how to create an animation: change the color of the background of a section while scrolling. No coding required.

To complete this tutorial, you will need:

  • A Webflow project with access to the designer mode

Step-by-step tutorial

Video tutorial.. 🍿🎬

1 - Create your section

2 - Add your CSS style properties

For this tutorial, we will create a class named section-animation with a background color. This color will change as we scroll into this section.

Section in Webflow
Section-animation

3 - Create the animation

1. Select the section to animate

2. Create a "while scrolling in view" interaction

CSS style animation 'BG color' in Webflow
Selection of "While scrolling in view"

3. Add multiple BG color values to the section element

CSS style animation 'BG color' in Webflow
Selection of a "BG color" animation

4. Modify the BG color value based on the scroll % within the section using %keyframe

Background color change animation in Webflow
Zoom in on the 4 different configurations

4 - Test the animation in the design tool

Test the animation using the "live preview."

🎁 This feature allows you to fine-tune the %keyframe of your animation to ensure it is perfectly synchronized.

Live preview animation in Webflow
Live preview animation in Webflow

And that's it! You now know how to animate the background color of a section on your website in Webflow.

If you want to learn more about Webflow, feel free to subscribe to the Digidop YouTube channel (new video every week) or follow our blog for articles on Webflow and no-code topics!

Bonus: Discover how to apply a glassmorphism effect in Webflow!

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

AI Tech Summit 2025 conference with a speaker on stage in front of a large audience, surrounded by big screens displaying “AI” and “Tech Summit 2025”. (Gen by AI)
Events

2025 Calendar of Must-Attend Web, Design & AI Events

2025 Calendar of Must-Attend Web, Design & AI Events
Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP
ChatGPT 5.0 OpenAI
News
AI

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

Want to turn your website into your most valuable asset?

Contact us today