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

What is Framer? Join the Community
Return to index
Cole Townsend
Posted May 26 - Read on Facebook

Hey gang! Using some sublayer loops and a little indexing, I made a prototype of a ping pong league app I'm working on.

While working on this, I learned an easy way to get a *pull* vs. a *push* drag effect. When animating a group of layers with a loop, you can add a delay by multiplying the index by some coefficient (say 0.05). Usually that means the last item in the array has the longest delay. Depending on the direction you are moving the group of items, it may make sense to pull them out of the way, instead if pushing them. With a simple .reverse() tacked on to your layer.subLayer() array you can flip this.

The linked dribbble shot has the animation looping, which I recorded with Screenflick and exported as a .gif.
https://dribbble.com/shots/2738483-New-Game-Added

Source:
http://share.framerjs.com/fx308a03lkgl/

1 Comments

Jordan Robert Dobson

Did someone say Ping Pong? *raises ears*

Read the entire post on Facebook