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

What is Framer? Join the Community
Return to index
Essie Zare
Posted Apr 01 - Read on Facebook

Hey guys,

So apologies as I'm pretty sure this is very simple (you will probably get a lot of stupid questions like this in the next couple of weeks from me).

I'm a product manager dabbling in design and prototyping on a side of the desk project for a POC. Any good ideas on how to get the button pop out effect (when it gets bigger with a bounce when you hover over it)? I spent the weekend reading through the coffee script e-book but honestly have hit a wall.

Thanks in advance for your help (i'm sure this is an easy one)

3 Comments

Juan J. Ramirez

http://share.framerjs.com/no14fhru42f0/

layerA = new Layer
x: 100
y: 100
width: 250
height: 250
opacity: 0.5
backgroundColor: "red"

layerA.center()

animationIn = new Animation
layer: layerA
properties:
width: 300
height: 300
curve: "spring(700, 10, 0)"
time: 1

animationOut = new Animation
layer: layerA
properties:
width: 250
height: 250
curve: "spring(400, 30, 0)"
time: 1

layerA.on Events.MouseOver, (event, layer) ->
animationIn.start()

layerA.on Events.MouseOut, (event, layer) ->
animationOut.start()

Basically just make it bigger when hovering and back to normal when hovering out. And also for the bounciness just play with the spring (more tension and less friction) .. I hope that helps.

Essie Zare

Thank you!

Mike Hughes

BTW as another Framer beginner and non-Dev hang in there and learn some more Framer. You'll get a new super power ie. The ability to actually build stuff !

Read the entire post on Facebook