Untangling scroll-related animations on websites
Control your scroll! Figuring out how scroll-based animations are put together is key to avoid being murdered at the hands of your users. Here is a breakdown of some common scroll based animation techniques.
Remember the age-old saying “in polite conversation, never talk about politics, religion or scroll-based web animations”? For good reason. Nothing will get web designers and developers more riled up then scroll-related animations on the web.
When done well, they can be fantastic and unique experiences. When they are done poorly, they are rage inducing. To make sure you don’t fall into the latter category, you need to understand the types of scroll-related animations you’ll need to create a beautiful website that doesn’t frustrate your users.
Scroll position triggering
One of the techniques most people will be familiar with is scroll position triggering. This involves using the user’s scroll location on the page as a trigger for firing events and animations. The developer doesn’t interfere with scrolling itself, just uses it as a trigger for things to happen.
There are plenty of different things you can do via scroll position triggering. Here are a few examples of the more popular effects and animations you’ll see.
This simply involves animating elements as they become visible in the viewport. You can fade things in and out, move them in from the sides etc.
Many sites shift elements relative to the position of the scrollbar. For example, as you scroll down, an image moves up. This gives websites a nice sense of movement.
Building on movement, if you stack a number of elements on top of each other and move them at different speeds relative to the scroll position, you get a parallax effect. This gives a site a sense of depth as well as movement.
This allows you to pin certain items to the screen in a particular location as the user scrolls. Usually there is a start and stop location where the pinned item is released. A common example of this is pinning a menu to the side of the page as the user scrolls down an article.
This is potentially more user-hostile approach if not done correctly. With scroll-jacking you do“take over” the user’s ability to scroll.
Like scroll position triggering, the action of scrolling usually fires an animation. Unlike scroll position triggering, the user can’t control the scroll. This gives a “presentation-like” effect where you move from page to page.
This is another of “the-same-but-different” effects that can be difficult to unravel when viewing a heavily animated page. Unlike scroll position triggering and scroll-jacking (where scrolling is used as a trigger for animation) smooth scrolling is the actual animation of the scroll movement itself. This means that when you scroll the page there is an easing or bounce effect.
Smooth scrolling becomes extra confusing when you realise that some devices already have a native smooth scrolling feature at the OS level. For example, if you’ve browsed the web on an iPhone you’ll know that you can “whoosh” the page with with your thumb and fly down to the bottom.
In the past, developers emulated this effect on devices that don’t naturally have it via third-party libraries. Nowadays, the browser now has it’s own native implementation of smooth scrolling making these libraries redundant.
Weaving everything together
Once you have identified the various scroll-based animation techniques you’ll want to try them out for yourself. Ha!
There are many MANY different libraries that will help you achieve various effects, for example:
Many of these overlap, have complimentary features, different animation backends etc. It’s overwhelming and trying to get everything working together can be tough.
So in a future blog post we’re going to help you out and show how these libraries can be brought together.