When Should I Use Easie
There are two primary use cases I had which led me to port Penner's equations to CSS.
- You want to create an advanced transition like an Elastic, Bounce, or Back ease.
- You need more control over how the ease will affect a certain property. Take for instance you use the ease to calculate a new x position. You could create a function that calculates the step in your ease from the last interval to get the current velocity of the object. You could use this calculated velocity in another function to affect the scale of the object. (I know.. I know.. this requires an example to make sense. I'm working on an easing tool that will demonstrate this better.)
Usage is quite 'easie' (haha). These are just timing functions so you can use them however you'd like. They take in parameters and return a value. It's up to you to determine how you want to implement the results of their calculations. To utilize any of the equations just grab the function from the Easie class.
Easie.linearOut(time,begin,change,duration) Easie.elasticOut(time,begin,change,duration) Easie.backInOut(time,begin,change,duration)
etc... All functions work pretty much identically to Penner's. For a complete tutorial on how they work and how to use them see the sample chapter from Robert's book.
For instance if I wanted to do an elastic ease from 300px down to 600px on the screen I would use the easing function as so:
duration = 1000 startY = 300 endY = 600 while duration > 0 currentTime = -(1-duration) y = Easie.elasticOut(currentTime,startY,startY-endY,duration) duration -= 1