Is it possible to animate the rounded corners/border radius of a div/element on scroll into view in Webflow?
TL;DR
- Use Webflow’s Scroll Into View trigger to add a Timed Animation that adjusts the Border Radius style property.
- Set initial and final radius values with keyframes, apply easing and duration, and optionally reverse the animation on scroll out.
Yes, you can animate the rounded corners (border radius) of an element on scroll into view using Webflow’s built-in Interactions panel. This allows for smooth transitions of the border radius as the element enters the viewport.
1. Enable Scroll into View Trigger
- Select the element you want to animate (e.g., a div block).
- In the Interactions panel (lightning bolt icon in the right sidebar), click + next to Element Trigger.
- Choose Scroll into view.
- Select either When scrolled into view or When scrolled out of view, depending on your need.
2. Create a New Animation
- Click + Add Animation under the scroll trigger.
- Select Timed Animation and click + New Timed Animation.
3. Set Up the Border Radius Animation
- With the element still selected, click + Add Action > Style > Border Radius.
- Set a starting border radius (e.g., 0px), then click the circular keyframe icon.
- Move the playhead forward (e.g., 0.5s), add another Border Radius action with your final value (e.g., 50px).
4. Fine-Tune Animation Timing
- Set an easing curve (e.g., Ease In Out) and duration for a smooth transition.
- Preview the animation to ensure it feels natural as you scroll.
5. Optional: Scroll Out of View Reversal
- You can also set an animation on Scroll out of view to reverse the border radius for a continuous effect.
Summary
To animate border radius on scroll into view, use Webflow’s Scroll Into View trigger and Timed Animations to animate the Border Radius style property. This allows smooth transformations as elements appear in the viewport.