What’s easing? #
Andrey Sitnik explains it best on his Easing Cheat Sheet demo…
Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.
Easing functions add a more natural motion to animations.
Multiple easing options #
Smooth Scroll now has four easing styles:
- Linear. Moves at the same speed from start to finish (the default style).
- Ease-In. Gradually increases in speed.
- Ease-In-Out. Gradually increases in speed, peaks, and then gradually slows down.
- Ease-Out. Gradually decreases in speed.
For all styles except linear, there are also four animation patterns, in order from most subtle to most extreme. Learn more about them at easings.net.
How it works #
Download Smooth Scroll on GitHub.
- More articles on...