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

What is Framer? Join the Community
Return to index
Florence Lafite
Posted Sep 16 - Read on Facebook

Hey everyone, I’m very new to Framer and Javascript/Coffeescript so I apologize if my question is silly but I’m stuck!

I created a simple animation with an onClick event. I want to start a new animation from one of the elements that popped up from the 1st animation and after browsing the internet and the book from Tessa Thornton I still cannot manage to move forward.

I’m going to copy my code in a comment below. Basically I want to click on “High” and generate a new animation from there using the elements “Low” and “Medium”. Do I need to stop the onClick event and if so how? Do I need to remove the previous states and create new ones? Thank you!

9 Comments

Florence Lafite

# Rectangle
Rectangle.opacity = 0

#Low
Low.y = 931
Low.opacity = 0

#medium
Medium.y = 931
Medium.opacity = 0

#high
High.y = 931
High.opacity = 0

#Priority_difference
Priority_difference.opacity = 0

Priority.states.add
stateA:
opacity: 1.00

Priority.states.next()

#Priority.states.remove("stateA")

#Rectangle
Rectangle.states.add
fadeIn:
opacity: 0.8

Rectangle.states.animationOptions =
curve: "spring(500, 30, 20)"
delay: 0.1

#Low
Low.states.add
scaleUp:
scale: 1
opacity: 1
y: 730

Low.states.animationOptions =
curve: "spring(500, 30, 20)"
delay: 0.1

#Medium
Medium.states.add
slideUp:
opacity: 1
y: 540

Medium.states.animationOptions =
curve: "spring(500, 30, 20)"
delay: 0.2

#High
High.states.add
slideUp:
opacity: 1
y: 346

High.states.animationOptions =
curve: "spring(500, 30, 20)"
delay: 0.3

Priority_difference.states.add
fadeIn:
opacity: 1

## Events

Priority.onClick (event, layer) ->
Rectangle.states.next()
Low.states.next()
Medium.states.next()
High.states.next()
Priority_difference.states.next()

Chris Camargo

Hey Florence, can you share your prototype? Just tap the Share button at the top of the Framer Studio UI and paste the link here.

Florence Lafite

Absolutely :) here it is Chris http://share.framerjs.com/p58oz31ef2nw/

Chris Camargo

Nice effect. So what exactly do you want to happen when you click on "High"?

Florence Lafite

I want the Low and Medium buttons to slide left or right or with a curve and disappear when I click on High; the High button to slide back down, and the Priority button to turn into a new icon.

Chris Camargo

I think the straightfoward way to do this would be to add new states for your Low and Medium buttons. Then, add a new click handler, like you did with your "Priority" layer, but apply it to your "High" layer instead. Clicking that button would move your Low and Medium buttons to their new slideLeft or slideRight states.

Chris Camargo

As for what happens to your High button after that, you can use "states.next()" to get it back to where it was before. Maybe even apply a delay to it so your other buttons have a moment to get out of the way.

Chris Camargo

P.S. There's also a Framer Slack channel if you're looking for real-time help: https://framer-slack-signup.herokuapp.com/

Florence Lafite

Thanks so much for your help! I'll try that and will join the channel

Read the entire post on Facebook