Streaming live at 10am (PST)

Horizontal movement along curved path on scroll


#1

Hi all!

I’m trying to animate a car icon moving across a page on scroll - easy enough with Webflow interactions, except I’d like it to move along a curved path (and rotate accordingly).

The only way I can think of without using custom code is to add the curved line as an SVG, and then animate the car moving across the curve by adding many keyframes that move the X/Y coordinates of the car and its rotation. This doesn’t seem very elegant, and seems likely to get messed up on different screen sizes.

I don’t have a share link as I haven’t built this yet - I was hoping to get some feedback on how else I might achieve this before I implement the above method.

Any advice is appreciated - thank you so much!