This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Paul Matthijs
Posted May 13 - Read on Facebook

Is there a way of creating paths for animations? I'd like to move two layers and make sure they don't intersect. A bit like magnets repelling each other, or doing planetary pass-by's.

7 Comments

Andreas Wahlström
Nick Bewley

Not sure if this is what you are looking for but saw this one a while back from Josef Richter: http://share.framerjs.com/n6336n9k1hal/

Paul Matthijs

Great, I'll just wait a bit longer and put this particular animation in the backlog. Nick: not exactly what I'm looking for but it gives me an idea for something else. Thanks!

Josef Richter

Paul Matthijs I guess what you want is animation *along* a path, right? And the path could even be a curve.. There's no easy way, but you can make a classic animation (with spring effect or whatever) along x-axis, and calculate y-position as a function of x-position using simple quadratic/cubic/sinus/whatever function.

Repelling "magnets" - again e.g. adjusting y-position as a function of distance between two objects...

Makes sense?

Paul Matthijs

Yes, it does and it makes complete sense :)

Andreas Wahlström

Yeah, you can probably use the change:x event for Josef's idea

Jordan Robert Dobson

See the layered animations example too on framer site.

Read the entire post on Facebook