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

Yes, it is possible to animate the rounded corners or border radius of a div or element on scroll into view in Webflow.

To achieve this, you can use Webflow's built-in interactions and scroll trigger features. Here's a step-by-step guide on how to accomplish it:

1. Select the div or element that you want to animate the rounded corners or border radius on.
2. Go to the "Interactions" panel on the right-hand side of the Webflow designer.
3. Create a new interaction by clicking on the "+" button.
4. In the interaction panel, select the trigger that will activate the animation. In this case, you'll choose the "Scroll into view" option.
5. Set the desired animation properties for the div or element. To animate the rounded corners or border radius, you'll need to add keyframes for the different stages of the animation.
1. Start by setting the initial state of the div or element with the desired rounded corners or border radius.
2. Next, add a new keyframe for the desired end state of the animation, where the rounded corners or border radius are fully animated.
6. Adjust the timing and easing of the animation in the interaction panel to achieve the desired effect.
7. Preview the animation by scrolling through the page or using the Webflow preview mode.

By following these steps, you'll be able to create a smooth animation of the rounded corners or border radius of a div or element as it comes into view. Remember to experiment with different timing and easing options to achieve the desired effect.