Hi there,
Creating a bouncing ball animation in Webflow is straightforward using the Interactions feature. Here’s how to set it up:
- Create a div block with 30x30px dimensions, add a background color, and set the radius to 50% to make it circular
- Open the Interactions panel and create a new page load trigger
- Add these animation actions for the ball:
- Initial state: Move up on Y-axis to -100
- Action 2: Move to Y=0 with 0.5s duration and bounce easing (this creates the landing effect)
- Action 3: Move back up to Y=-100 with 1s duration and in-out cubic easing (this creates the smooth lift)
- In the Interaction Settings, enable the loop option to make the animation continuous
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.