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

What is Framer? Join the Community
Return to index
Guus Baggermans
Posted Sep 25 - Read on Facebook

Does anybody know if it's possible to create a Bounce easing without overshoot?

23 Comments

Andreas Mitschke

But that's why it is a "bounce" animation.

Without overshooting you'd use an array of cubic-bezier animations ?

Marc Krenn

I'm afraid you'll have to use good ol' Math.cos for this effect:
http://www.motionscript.com/mastering-expressions/simulation-basics-3.html (scroll down to "Make it bounce")

Good luck translating that into Coffeescript - I couldn't do it :)

Guus Baggermans

Hmm, that's a good idea, using an array.

And actually, the above is a "Bounce". What's implemented in framer is a "Spring", both have their origins in physics, but they are different :)

Guus Baggermans

I'm not quite sure how to implement a handcoded animation like your link Marc Krenn. I would have to create my own animation function with a for loop and a delay, but that doesn't feel proper for framer...

Marc Krenn

I 100% agree, Guus. Let's try Andreas' approach :)

Andreas Mitschke

Guus Baggermans Ye, I know it's a spring, yet I made a mistake. I was including a squeeze into a complete bounce animation and without thinking about it I thought that includes a small fraction below x0, but logic failure of mine. Happens if you post before thinking :(

I like the script idea, but I do not entirely understand how I'd implement that. I'll clip it for later use, that's for sure.

Daniel Fischer

Hey Guus, nice to see you around ;) good question that i didn't found a solution for either...

Guus Baggermans

Hi Daniel! I'm trying to string a couple of animations together, let's see where I get with that...

Guus Baggermans

Ok, almost there. Just can't get my Animation to update with the dampening value that is being calculated in the fall.on function...

http://share.framerjs.com/l49kf2b43w1r/

Marc Krenn

super-crude attempt to get the vertical momentum right but it's still way off :/
http://share.framerjs.com/w3a255d7yfpw/
dl: http://framer.link/share.framerjs.com/download/w3a255d7yfpw/bouncingball.zip

Ian McClure

Guus, I think this has to do with the fact that fall is an animation block. I don't think it is recalculating the values each time the animation is called. It only does it when you create the block.
I made them functions that animated the cube instead and the bounce decays.
http://share.framerjs.com/g97ey5slfb51/

Andreas Wahlström

Here's another basic approach, using cosine: http://share.framerjs.com/wo9ky88avww2/

Marc Krenn

Very well done, Andreas! Care to share the download link?

Stephen Crowley

Yeah- Andreas- it's feels more natural- it's really close. Marc, top right arrow of the project to download.

Marc Krenn

Stephen, AdBlock removed all the UI chrome, in both, Chrome and Safari. Weird. Never happened to me before oO

Stephen Crowley

Ha! Yeah, that is odd...

Andreas Wahlström

Stephen Crowley yeah, still some tweaking to do. feel free to improve further. would be nice to add a slow down to ball.x, too :)

Stephen Crowley

Was just thinking that if the inertia on roll increased how that would look - yes, can't wait to take a look!

Guus Baggermans

Wow guys, these responses are amazing! Thanks!

Isaac Weinhausen

Andreas Wahlström Just found this, totally steeling this! Thank you so much!

Marc Krenn

FYI Isaac, in case you're looking for an interactive bounce "physics":

https://www.facebook.com/groups/framerjs/permalink/761121347348272/?match=Ym91bmNl

The code itself is most likely below your standards, though :)

Isaac Weinhausen

Marc Krenn Looks awesome! The tr.im links are broken. Any chance you have the original urls?

Read the entire post on Facebook