News

Create CSS and JS smooth scrolling effects

Creative developer Baptiste Briel explains how to get started with the smooth scroll JavaScript library at the heart of the Suspended Animations site

SAtutorial

Creative developer Baptiste Briel explains how to get started with the smooth scroll JavaScript library at the heart of the Suspended Animations site

SAtutorial

GET THE CODE FOR THIS TUTORIAL


Get started

A popular technique amongst many websites is to override the default body scroll behaviour in favour of custom scrolling. In many cases this is achieved using JavaScript and specifically the requestAnimationFrame() method for applying CSS transforms across several HTML elements. This smooth scroll is what’s used on sa-studio.fr and utilises a library script on GitHub.

Smooth scroll library

As mentioned, the smooth scrolling scripts used on SA are available via GitHub at github.com/BaptisteBriel/smooth. Download by clicking the Download ZIP button. Save and unzip the ‘smooth-gh-pages.zip’ repository to find a selection of very simple demos to see how smooth scroll works. The three main library JS files can be found within the src folder.

Set up the HTML

To start, copy those core JS files into the root of an HTML document and attach just before the closing </body> of the page. Next we’ll need some simple HTML elements, starting with a wrapper <div> with the class .vs-section. This is very important as the Smooth.js script gets the max scrolling value from this wrapper’s height. Be sure the that there are no floating <divs> without clearfix or other CSS bugs that would make the wrapper smaller:

001 <body>     
002 <div class="section vs-section">    
003 // Nested <divs> to go here
004 </div>     
005 <script src="rAF.js"></script>    
006 <script src="vs.js"></script>    
007 <script src="smooth.js"></script>
008 </body>    

Add additional divs

Basically, the default scroll is applied on this section wrapper. This means that if you want to apply parallax effects on your page, you’ll need extra divs within this wrapper. So inside, create a few divs with the class .vs-transform – for instance we’ve added five here. You might also set the data-speed attribute to define how fast each element will move on scroll. In addition, we’ll add some minimal CSS styles:

001 CSS:     
002 body {    
003 overflow: hidden;
004 }     
005 .section {    
006 position: absolute;    
007 /* if vertical scrolling */
008 width: 100%;    
009 height: auto;     
010 /* if horizontal scrolling */    011 width: auto;
012 height: 100%     
013 }    
014 HTML:    
015 <body>
016 <div class="section vs-section">    
017 <div class="vs-transform" data-speed="0.2"></div>     
018 <div class="vs-transform" data-speed="0.4"></div>    
019 <div class="vs-transform" data-speed="0.6"></div>
020 <div class="vs-transform" data-speed="0.8"></div>     
021 <div class="vs-transform" data-speed="1"></div>    
022 </div>     

Initialise with JavaScript

With our JavaScript we now need to initialise a new object with some parameters: the wrapper section .vs-section, the extra divs .vs-transform (which is optional) and as you can see, an easing effect. This is like the data-speed attribute on HTML elements, but for the section wrapper. As soon as we have defined our variable scroll, scroll.init() launches all event listeners for touch interactions on mobile, wheel interactions on desktop and will start applying the CSS transforms using requestAnimationFrame(). Using scroll.destroy(); stops the events and requestAnimationFrame().

001 //get the section     
002 var section = document.querySelector(‘.vs-section’);    
003 //get the extra divs
004 var divs = document.querySelectorAll(‘.vs-transform’);
005 //initialize the object w/ some     parameters
006 var scroll = new Smooth({     
007 direction: ‘vertical’,    
008 section: section,
009 ease: 0.1,     
010 els: divs // optional    
011 });    
012 //kickoff the smooth scroll
013 scroll.init();    

Extra scroll methods

Notice that if you want a parallax effect, the wrapper section will not be transformed. If we want to transform the wrapper and a few more divs, the wrapper will need the .vs-transform class and data-speed attribute as well. In addition, other scrollTo functions are available for invoking optional behaviours:

001 HTML:     
002 <!-- the div we want to scroll-to     -->    
003 <div class="vs-transform js-referer" data-speed="0.2"></div>
004 <!-- the link (could be a nav menu) -->
005 <span class="vs-scrollto" data-scroll="js-referer">text</span>    
006 JAVASCRIPT:     
007 // scrollTo with a fixed value (useful for simple scrollTop)    
008 smooth.scrollTo(0);
009 //scrollTo a specific div     
010 var div = document.querySelector('.    js-referer');    
011 var offset = div.getBoundingClientRect().top;    
012 // this should also work :)
013 smooth.scrollTo(offset);
×