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

What is Framer? Join the Community
Return to index
Mark J Harvey
Posted Jul 14 - Read on Facebook

Is there any way to do a simple button tap animation / interaction?

When I tap a button, it bounces, scales to 0.8 then back to 1 with a spring curve?

12 Comments

Chris Camargo

Of course. What have you tried?

Mark J Harvey

I tried to add 2 states, 1 to scale down and another back to default. Then on Events.click cycle through both states. It seems like a long winded way of doing this. I'm really struggling with basic operations

Chris Camargo

Is this for a touch interface, or is a mouse interaction?

Mark J Harvey

touch - iPad

Chris Camargo

Events.TouchStart and Events.TouchEnd are good events for you. Try hooking your state transitions to those events and see how it plays out. http://framerjs.com/docs/#events.events

Mark J Harvey

This worked, thanks!

layer['button-name'].states.add ({
scaleDown: {scale:0.9}
scaleUp: {scale:1}
})
layer['button-name'].on Events.TouchStart, ->
layer['button-name'].states.next("scaleDown")
layer['button-name'].on Events.TouchEnd, ->
layer['button-name'].states.next("scaleUp")

Chris Camargo

Mark J Harvey

still wondering if there's a better way to go about this. Seems like a long walk for such a simple thing

Chris Camargo

You could shorten your code a *bit* like this:

layer['button-name'].states.add
scaleDown: {scale:0.9}
scaleUp: {scale:1}

layer['button-name'].on Events.TouchStart, ->
@states.switch "scaleDown"
layer['button-name'].on Events.TouchEnd, ->
@states.switch "scaleUp"

Chris Camargo

But the concept is dead on. It doesn't get a whole lot more simple than that.

Andreas Wahlström

you don't have to define the default state. it's done automatically when you add a new state. so this should work too:

btn = new Layer
btn.states.add scaleDown: scale: .9
btn.on Events.TouchStart, -> @states.next()
btn.on Events.TouchEnd, -> @states.next()

Mark J Harvey

Thanks for your help Chris Camargo and Andreas Wahlström
I have another question below if you could be so kind =D

Read the entire post on Facebook