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

What is Framer? Join the Community
Return to index
Patrick Wong
Posted Sep 09 - Read on Facebook

I'm trying to get a layer to 1) Float up 2) Float down 3) repeatedly loop. Anyone know of a good solution of how I might achieve this?

6 Comments

Patrick Wong

I'm currently animating the layer's y pos and chaining another animation when the first one ends, but I'm not sure how to loop the entire sequence. Using repeat() is only repeating the last animation.

Daniel Lin

I've used the following to continuously loop the fading-in-and-out of text:

//loop only if the 'keyboard' layer is in the 'default' state
textFading = ->
if keyboard.states.current != "default"
return
textFade = textCursor.animate
properties: {opacity:0}
curve: 'ease-in'
time: 0.8
textFade.on 'end', ->
textCursor.animate
properties: {opacity:1}
curve: 'ease-out'
time: 0.8
if keyboard.states.current == "default"
Utils.delay 1.5, textFading //calls the function again

hopefully that helps with what you're doing..!

Ces Cortez

I've been using states and switch statements to start different animations depending on which one just ran.

Here's an example: http://codepen.io/makeshowlearn/pen/aEcDm

Patrick Wong

Ces Cortez using states worked exactly as needed. Thanks for sharing!

Patrick Wong

thanks Daniel Lin, I ended up using states to handle this per Ces' solution. Nice fllyboarding pic - just did that in Cabo, so fun!

Patrick Wong

In case anyone else is following, I simplified the code a bit to achieve the same:

Once the animation ends, you can simply use:

layerA.states.next "stateA", "stateB"

This toggles between the different states. Forked Ces' pen here: http://codepen.io/patrickwong/pen/vbrCx

Read the entire post on Facebook