Skip to main content Skip to secondary navigation Accessibility Feedback

Smooth Scroll with easing

Smooth Scroll is a lightweight script that animates scrolling to anchor links. Last week it got an awesome new feature courtesy of Willem Liu and Gaëtan Renaudeau: easing support.

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.

  • Quad
  • Cubic
  • Quart
  • Quint

How it works #

Adding an easing style to an anchor link is as simple as adding a data-easing attribute. Again, major kudos to Willem Liu and Gaëtan Renaudeau for providing the code to make this happen!

Download Smooth Scroll on GitHub.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests