Is it possible to animate the rounded corners/border radius of a div/element on scroll into view in Webflow?
TL;DR
- Select the target div, assign a class, and set an initial border radius in the Style panel.
- Add a "Scroll Into View" interaction, create a timed animation, and animate the border radius from the initial to final value using keyframes.
- Adjust easing and duration for smoothness, then preview and test the scroll-triggered animation.
Yes, you can animate the border radius of a div on scroll into view in Webflow using interactions. This can be done by applying a scroll-based animation to the element and adjusting its border radius over time.
1. Prepare the Target Element
- Select the element (div) you want to animate.
- Assign a class to it for targeted styling and animation.
- Set an initial border radius under the Style panel, e.g., 0px or 50px, depending on your desired effect.
2. Add a Scroll Into View Interaction
- Go to the Interactions panel (lightning bolt icon).
- With the element selected, click + Add Trigger > Scroll Into View.
- Choose On Scroll In (and optionally add an action for Scroll Out).
- Click Start an Animation and then + New Timed Animation.
3. Animate the Border Radius
- Click the ‘+’ next to the animation timeline and select Style > Border Radius.
- Set the initial value (e.g., 0px) as a keyframe at the start of the timeline.
- Move the timeline scrubber to your desired time (e.g., 0.3s), then change the border radius (e.g., to 50px or another value).
- Webflow will auto-keyframe the new value for the animation.
4. Adjust Easing and Duration
- Adjust the easing curve and duration for a smooth animation. For example:
- Easing: Ease out or cubic-bezier for a natural feel
- Duration: 0.3s to 1s depending on your design
5. Test the Interaction
- Enter Preview mode in the Designer.
- Scroll the page to test the animation and confirm the border radius transitions smoothly.
Summary
You can absolutely animate a div’s border radius on scroll into view in Webflow by using scroll-triggered interactions with timed animations that adjust the style property over time.
