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

What is Framer? Join the Community
Return to index
Joel Smith
Posted Jun 07 - Read on Facebook

I'm trying to create an animation where I have several dots on a map, and over a few seconds each dot scales up and then returns to it's default state - Starting with the furthest left dot and finishing on the right.

My initial idea is to have an invisible layer animating left to right, then having the dots change state when their x position matched the invisible layer. but I can't get that to work. Any pointers or examples of something similar?



Ian McClure

I would trigger the next dots animation in an event trigger. Adding something like this to each dot

Dot.onAnimationEnd ->
NextDot.stateCycle("Big", "Small")

Joel Smith

Thanks but that isn't quite what I'm after becuase I'm trying (loosely) represent time across the world so for example 2 dots on the USA west coast would both animate with little time in between, then there would be a longer time delay before a dot in Australia animated.

Joel Smith

Hopefully this example will show the idea a bit better

The other thing to note is that I'm going to have around 50 dots, and some will have the same x position

Ian McClure

Here is what I came up with. I hope this helps. I will also say that it is rather CPU heavy because of the interval function.

Joel Smith

That's awesome, thanks for your help!

Ian McClure

Not a problem!

Read the entire post on Facebook