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

What is Framer? Join the Community
Return to index
Sune Lorem
Posted Oct 12 - Read on Facebook

Hey,
for some reason I can not get 'layer.states.next()' to work correctly. When I click my "BTNbuy" button the "cart_on" is displayed with cart_off's delay — and the cart_off does not happen at all.

I understand the delay thing, but don't see why "cart_off" state is not being triggered when using 'cart.states.next("cart_on", "cart_off")'.

#############
My code below:
#############
# cart states — show cart with .3sec delayed, and remove cart after 5 sec.
cart.states.add
cart_on:
y: 46
x: 1692
opacity: 1
scale: 1
cart.states.animationOptions = delay: .3

cart_off:
opacity: 0
cart.states.animationOptions = delay: 5

# button
BTNbuy.on Events.click, ->
cart.states.next("cart_on", "cart_off")

4 Comments

Jonas Treub

With the new animation API you can specify animation options per state. Here is an example: http://share.framerjs.com/bdc2xpug7qlq/

Sune Lorem

Thanks! Cool, but I still have to click the button twice — I was hoping it would progress to the next state like a timeline am I using the wrong event?

Jonas Treub

You can chain animations by listening to the "onStateDidSwitch" event: http://share.framerjs.com/icyfib41f9hn/

Sune Lorem

Thanks, I learned a lot from that! I followed your example and got it to work chaining the animation. It did conflict with my MouseOver/MouseOut events however, but glad I got the "timeline animation" tested.

Read the entire post on Facebook