Is there a way to change the border radius on scroll in Webflow?

Yes, it is possible to change the border radius on scroll in Webflow. This can be achieved by using some custom code combined with interactions. Here's a step-by-step guide on how to do it:

1. Add a new class to the element: Select the element to which you want to apply the border radius change on scroll. In the Styles panel, click the '+' icon to add a new class. Give the class a unique name.

2. Set initial border radius: In the Class styles panel, set the initial border radius value for the element. This will be the starting point before the scroll-triggered change takes effect.

3. Add an interaction: With the element selected, click the '+ New Interaction' button in the Interactions panel. Choose the 'Scroll' trigger option for the interaction.

4. Add a new step: Click the '+ New Step' button to add a new step to the interaction. In this step, you'll define the border radius value to be applied when scrolling reaches a certain point.

5. Set scroll offset: In the 'While scrolling in view' section of the new step, adjust the scroll offset value. This determines when the border radius change will start taking effect as you scroll down or up the page.

6. Add a new action: Click the '+ Add Action' button in the new step. Choose 'Affect different element' as the action type.

7. Set target element: In the 'Select element' dropdown, choose the previously created class that you want to target for the border radius change.

8. Define border radius value: In the 'Affect properties' section, choose 'Border Radius'. Set the desired border radius value to be applied when scrolling reaches the specified offset.

9. Preview and adjust: Preview your website and test the scroll interaction. If the border radius change is not as desired, you can go back and adjust the scroll offset and border radius values until you achieve the desired effect.

Keep in mind that applying interactions to elements can affect performance, so make sure to optimize your website's performance by using interactions sparingly and testing on different devices to ensure smooth scrolling.

Additional resources:

• Webflow Interactions
• Webflow Class Styles

Additional Questions:

1. How can I create custom interactions in Webflow?
2. Is it possible to change other properties based on scroll position in Webflow?
3. Can I apply different border styles to an element on scroll in Webflow?