This module adds a Utils.ease function, which allows for non-linear modulation / "Easing" of values. Based on Jim Jeffers' coffeescript port of Robert Penner's easing functions.
OR
| Step | Instruction |
|---|---|
| 1 | Download the ease module and unzip the downloaded archive |
| 2 | Put ease.coffee into your prototype's modules-folder or drag'n'drop it onto the Framer window |
| 3 | Change the autogenerated require-line on the top of the code to require 'ease' |
| 4 | Save (CMD+S) your project to get Framer to load the module |
# Available Easings:
# Linear: linearIn, linearOut, linearInOut, linearNone
# Sine: sineIn, sineOut, sineInOut
# Quad: quadIn, quadOut, quadInOut
# Circ: circIn, circOut, circInOut
# Cubic: cubicIn, cubicOut, cubicInOut
# Quart: quartIn, quartOut, quartInOut
# Quint: quintIn, quintOut, quintInOut
# Exponential: expoIn, expoOut, expoInOut
# Back: backIn, backOut, backInOut
# Bounce: bounceIn, bounceOut, bounceInOut
# Elastic: elasticIn, elasticOut, elasticInOut
# Syntax:
Utils.ease(value, [rangeFrom], [rangeTo], curve, options*)
# *Options:
# limit (default = false)
# overshoot (default = 1.70158), Back-Easings only
# amplitude (default = null), Elastic-Easings only
# period (default = null), Elastic-Easings only
# Example:
layer.y = Utils.ease(slider.value, [0,1], [0,100], "expoIn")
# Example with options:
layer.y = Utils.ease(slider.value, [0,1], [0,100], "elasticInOut", {limit: true, amplitude: 2, period: 0})
# Bonus: Utils.randomNumberBiased
# Example project 1 – instant: https://framer.cloud/dUHzn/
# Example project 2 – animated: https://framer.cloud/rMoti/
# Syntax:
Utils.randomNumberBiased(from, to, curve, options*)
# Example:
print Utils.randomNumberBiased(0, 100, "expoIn")