Streaming live at 10am (PST)

Interaction with movement along a curved path?


#1

Webflow currently only supports moving elements from one x-y coordinate to another, in a straight line. You can link them together, or if you're desperate, you can try to pair up different easing types on the x translation and the y translation to get the shape you want.

But it would be useful if there were a good way to define a curved path for the translation.

Is this a pipe dream?


#2

@Grant Have you tried playing with a combination of x/y movement and rotation? You can get some pretty cool, curved movement this way. I threw together a quick example:

http://path-animation.webflow.io/


#3

Thanks @nate for the the tip and the demo!

I've done an animation with separate x and y movement, but not with rotation.

Say the element you're animating isn't a circle, and you want it to stay upright the whole time, like it's hanging from a pin. Would you also have to add another trigger that counterbalances the rotation that it inherits? That would make tweaking the animation more clunky. Or is there way to prevent it from inheriting its parent's rotation?


#4