Is it possible to animate the rounded corners/border radius of a div/element on scroll into view in Webflow?

Yes, it’s possible to animate the border radius of a div on scroll into view in Webflow using its built-in interactions and style settings.

1. Prepare the Element

• Select the element (div block or similar) that you want to animate.
• Set an initial border radius style in the Style panel (e.g., 50px rounded corners).

2. Create a Scroll-Based Animation

• Go to Interactions panel (lightning icon).
• Under Page Trigger, choose While page is scrolling OR use Scroll Into View for a more targeted approach.

3. Use “Scroll Into View” Trigger (Best for Single Element)

• With the element selected, click + Element Trigger > Scroll into view.
• Choose “Scroll into view” and click + Timed Animation.
• Name your animation (e.g., “Border Radius Animate”).

4. Define the Animation

• In the animation timeline, click + Add Action > Style > Border Radius.
• Set the initial border radius (e.g., 0px for square).
• Click + to add another step and set the final border radius (e.g., 50px or any desired value).
• Adjust duration, easing, and delay as needed.

5. Add Optional “Scroll Out of View” Animation

• Still under the Scroll Into View trigger, add an animation for the “Scroll out of view” event if you want to reverse the effect.

6. Preview and Adjust

• Use Webflow’s Preview mode to check how the animation looks as the element scrolls into view.
• Fine-tune the transition speed and easing for a smoother effect.

Summary

You can animate the border radius of an element in Webflow using a Scroll Into View trigger combined with style changes in interactions. Just set initial and final values for the border radius and Webflow will animate between them as the user scrolls.