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.
3 - Create the animation
1. Select the section to animate
2. Create a "while scrolling in view" interaction
3. Add multiple BG color values to the section element
4. Modify the BG color value based on the scroll % within the section using %keyframe
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.
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!
