How to make a ball that bounces off edges of viewport

Is it possible to create an animation like this in Webflow?

I want to have a ball like this moving around the back of my homepage, but the attempts I’ve made so far always end up moving off the page


Here is my public share link: https://preview.webflow.com/preview/coles-supercool-project-7305b8?utm_medium=preview_link&utm_source=designer&utm_content=coles-supercool-project-7305b8&preview=718367c9050ad914eb589d60c3dba13c&mode=preview
(how to access public share link)

Hi Cole, you can absolutely accomplish this in webflow. You can actually use that code from CodePen with some minor tweaks and edits. I’ll provide an explanation of what I have done and I will also provide a link to the demo page I created for you to see.

I created a Section → Div → IMG File.

I called the section BouncingBall as the name is irrelevant.
I called the DIV ‘x’ as the code defines that, you can always change it though.
I called the image ‘y’, as well the code defines that.
I added the CSS code to Webflow. (Please use the one I have rather than the CodePen one, it may give you issues)

Really simple and I hope you make use of the example I created. Also note, playing with the zIndex can have a nice effect as you can determine whether the sphere moves behind the existing website elements and sporadically coming in and out or you can have it overlay on top of everything and always be showing.

read-only link: Webflow - Bouncing-Ball

Cheers