Untangling scroll-related animations on websites

Remem­ber the age-old say­ing ​“in polite con­ver­sa­tion, nev­er talk about pol­i­tics, reli­gion or scroll-based web ani­ma­tions”? For good rea­son. Noth­ing will get web design­ers and devel­op­ers more riled up then scroll-relat­ed ani­ma­tions on the web. 

When done well, they can be fan­tas­tic and unique expe­ri­ences. When they are done poor­ly, they are rage induc­ing. To make sure you don’t fall into the lat­ter cat­e­go­ry, you need to under­stand the types of scroll-relat­ed ani­ma­tions you’ll need to cre­ate a beau­ti­ful web­site that does­n’t frus­trate your users. 

Scroll posi­tion triggering

One of the tech­niques most peo­ple will be famil­iar with is scroll posi­tion trig­ger­ing. This involves using the user’s scroll loca­tion on the page as a trig­ger for fir­ing events and ani­ma­tions. The devel­op­er does­n’t inter­fere with scrolling itself, just uses it as a trig­ger for things to happen.

There are plen­ty of dif­fer­ent things you can do via scroll posi­tion trig­ger­ing. Here are a few exam­ples of the more pop­u­lar effects and ani­ma­tions you’ll see.

Reveals

This sim­ply involves ani­mat­ing ele­ments as they become vis­i­ble in the view­port. You can fade things in and out, move them in from the sides etc.

Move­ment

Many sites shift ele­ments rel­a­tive to the posi­tion of the scroll­bar. For exam­ple, as you scroll down, an image moves up. This gives web­sites a nice sense of movement.

Par­al­lax

Build­ing on move­ment, if you stack a num­ber of ele­ments on top of each oth­er and move them at dif­fer­ent speeds rel­a­tive to the scroll posi­tion, you get a par­al­lax effect. This gives a site a sense of depth as well as movement.

Pin­ning

This allows you to pin cer­tain items to the screen in a par­tic­u­lar loca­tion as the user scrolls. Usu­al­ly there is a start and stop loca­tion where the pinned item is released. A com­mon exam­ple of this is pin­ning a menu to the side of the page as the user scrolls down an article. 

Scroll-jack­ing

This is poten­tial­ly more user-hos­tile approach if not done cor­rect­ly. With scroll-jack­ing you do​“take over” the user’s abil­i­ty to scroll.

Like scroll posi­tion trig­ger­ing, the action of scrolling usu­al­ly fires an ani­ma­tion. Unlike scroll posi­tion trig­ger­ing, the user can’t con­trol the scroll. This gives a ​“pre­sen­ta­tion-like” effect where you move from page to page. 

Smooth scrolling

This is anoth­er of ​“the-same-but-dif­fer­ent” effects that can be dif­fi­cult to unrav­el when view­ing a heav­i­ly ani­mat­ed page. Unlike scroll posi­tion trig­ger­ing and scroll-jack­ing (where scrolling is used as a trig­ger for ani­ma­tion) smooth scrolling is the actu­al ani­ma­tion of the scroll move­ment itself. This means that when you scroll the page there is an eas­ing or bounce effect.

Smooth scrolling becomes extra con­fus­ing when you realise that some devices already have a native smooth scrolling fea­ture at the OS lev­el. For exam­ple, 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, devel­op­ers emu­lat­ed this effect on devices that don’t nat­u­ral­ly have it via third-par­ty libraries. Nowa­days, the brows­er now has it’s own native imple­men­ta­tion of smooth scrolling mak­ing these libraries redundant.

Weav­ing every­thing together

Once you have iden­ti­fied the var­i­ous scroll-based ani­ma­tion tech­niques you’ll want to try them out for your­self. Ha! 

There are many MANY dif­fer­ent libraries that will help you achieve var­i­ous effects, for example:

• Scroll­Mag­ic
• AOS
• WOW.js
• Way­points
  
• Scroll­Re­veal
• Scroll­Trig­ger
• …

Many of these over­lap, have com­pli­men­ta­ry fea­tures, dif­fer­ent ani­ma­tion back­ends etc. It’s over­whelm­ing and try­ing to get every­thing work­ing togeth­er 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.