--- published: true --- In this tutorial, we will explore how we can add a bit of flair to a website by animating elements onto the page based on their viewport visibility. We will do so with the help of [Animista](https://animista.net) - a CSS animations on-demand library and [Scrollama](https://github.com/russellgoldenberg/scrollama) - a lightweight JavaScript library for scrollytelling based on [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Prerequisites: * Basic knowledge of HTML * Basic knowledge of CSS/SCSS * Basic knowledge of JavaScript * Basic knowledge of terminal (node, npm) We won't be focusing on the design aspect, so go ahead and download [this free Agency bootstrap theme](https://startbootstrap.com/themes/agency/). It looks nice, it is responsive and will make for an excellent starting point. The project runs on [Gulp](https://gulpjs.com/) so make sure [Node.js](https://nodejs.org/) is installed on your development machine. It is already set up with [Sass](https://sass-lang.com/) and [Browsersync](https://www.browsersync.io) which will refresh our browser in the background whenever we make any changes in the code. Once you have downloaded the theme, fire up the terminal, navigate to the project root folder, install the dependencies and run the project by running the following commands in the terminal: ```sh $~ npm install $~ npm start ``` If everything went well you should be looking at the theme on your machine's default browser. Next, go ahead and open the theme folder in your editor of choice (e.g. [VS Code](https://code.visualstudio.com)). Structuring the Content ----------------------- Before we proceed, let's stop for a moment and think about our page HTML structure. We will be grouping all animated elements by the animation used. Basically, we will use some kind of a wrapper element where we can define the animation that is going to be applied to its children. Let's give this wrapper element the `animista` class. Furthermore, we will be animating only some of the children elements, so we need another CSS class for this purpose. We can use that same class for controlling the animation delay as well. In our case, we will be using `anim-delay-{number}` class. By doing so, we gain a certain degree of control over animation delay values in a simple, declarative manner. Finally, we will be triggering our animations by adding the `appear` class to `animista` wrapper. If this sounds confusing — don't worry, it will make more sense later on.

Elements Structure - Animated elements are wrapped inside the 'animista' element

Laying the groundwork --------------------- Let's begin by creating `animista.scss` file inside the `scss` folder. We will write all of our animation related CSS code here. We want all animated elements to be initially hidden. This is where the [CSS attribute selector](https://www.w3schools.com/cssref/sel_attr_contain.asp) comes in handy, as it allows us to target all elements that have class attribute value containing `anim-delay-`. Let's write our SCSS code like this: ```scss // Our wrapper element .animista { // Hide all animated elements [class*="anim-delay-"] { opacity: 0; } } ``` Next, open up the `agency.scss` file in the `scss` folder and import the `animista.scss` file that we have just created: ```scss // ... // Animista @import "animista.scss"; ``` Time to test if everything works. Let's assign our newly created classes to an element on our page. Open the main `index.html` file in the project root folder and change the **Services** section heading and subheading like so: ```html ...

Services

Lorem ipsum dolor sit amet consectetur.

... ``` Excellent, the heading and subheading are now both hidden. Let's try and animate those two elements with simple slide-in animation. Head on over to [Animista entrances category](https://animista.net/play/entrances) and select the ['fade-in-bottom'](https://animista.net/play/entrances/fade-in/fade-in-bottom) animation. You can tweak the animation options in the `options` panel. Great thing about [Animista](https://animista.net) is that you can grab only the code for the animation you actually plan on using. So once you are happy, click the `generate code` button at the top right of the main stage (the round button with the curly braces icon). We don't need the auto-prefixed option so you can turn that off. ![Animista - Generate Code Button](https://dev-to-uploads.s3.amazonaws.com/i/l4b1jnju0i2hv09r8pw7.png)

Animista - Generate Code Button

![Animista - Autoprefixer Toggle and Copy Keyframes Buttons](https://dev-to-uploads.s3.amazonaws.com/i/ya4if5xsyugz40blo4st.png)

Animista - Autoprefixer Toggle and Copy Keyframes Buttons

Copy the animation keyframes code and paste it into `animista.scss` file at the end. You can copy the animation class code too, but we will modify it slightly. ```scss // Our wrapper element .animista { // Hide all animated elements [class*="anim-delay-"] { opacity: 0; } // Appearing animations &.appear { // Fade in bottom animation &.fade-in-bottom [class*="anim-delay-"] { animation-name: fade-in-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; } } } /* ---------------------------------------------- * Generated by Animista on 2020-1-29 20:13:59 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation fade-in-bottom * ---------------------------------------- */ @keyframes fade-in-bottom { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } ``` Connecting the Pieces --------------------- We now have everything set up. Next thing we need to do is include the Scrollama library. Add the following code at the end of the `index.html`, right before the closing `` element, after all other ` ... ``` Note that we don't yet have the `scroll-anim.js`file, so let's create it now in the project's `js` folder and add the following code: ```js var scroller = scrollama(); scroller .setup({ step: '.animista', offset: 0.85 }) .onStepEnter(function(response) { response.element.classList.add('appear'); }); window.addEventListener('resize', scroller.resize); ``` Basically, we are telling Scrollama to add the `appear` class to all `animista` wrapper elements when they scroll into the viewport. The default offset is `0.5` which means the trigger is set to the center of the viewport. We are going to move the threshold further down to 0.85 so that animations get triggered a bit earlier. Finally, we need to tell our `animista` wrapper element to use the newly created animation, like so: ```html

...

``` Creating Staggered Animations ----------------------------- And now if we scroll down a bit, we see that the heading and subheading both slide in onto the page. However they do so at the same time and, as discussed earlier, we would like to have some control over `animation-delay` values. While at it, we can also modify our code so we have some default animation properties and are able to over-ride them should we decide to. ```scss .animista { // Hide all animated elements // ... // Appearing animations &.appear { // Default animation options [class*="anim-delay-"]{ animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000); animation-fill-mode: both; } // Fade in bottom animation &.fade-in-bottom [class*="anim-delay-"] { animation-name: fade-in-bottom; } // Let's add animation delays so we can // create staggered animation effect .anim-delay-1 { animation-delay: 0.1s; } .anim-delay-2 { animation-delay: 0.2s; } .anim-delay-3 { animation-delay: 0.3s; } .anim-delay-4 { animation-delay: 0.4s; } .anim-delay-5 { animation-delay: 0.5s; } .anim-delay-6 { animation-delay: 0.6s; } .anim-delay-7 { animation-delay: 0.7s; } } } ``` We are almost there, let's try adding more animated elements inside the `Services` section. Note how we are only adding `animista` and `anim-delay-{number}` classes to create a nice staggered animation effect. ```html ...

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

... ``` Perfect, this looks much better! Now, how about we try using different animation for portfolio items. Head on over to Animista again, grab only the keyframes code for the ['tilt-in-br'](https://animista.net/play/entrances/tilt-in/tilt-in-br) animation and paste it at the end of `animista.scss`. ```scss // ... /* ---------------------------------------------- * Generated by Animista on 2020-1-29 21:14:0 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation tilt-in-br * ---------------------------------------- */ @keyframes tilt-in-br { 0% { transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg); opacity: 0; } 100% { transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } } ``` Next, add the `tilt-in-br` class after the `fade-in-bottom` and before the delay definitions: ```scss .animista { // ... // Appearing animations &.appear { // Default animation options // ... // Slide in blurred animation // ... // Tilt in BR animation &.tilt-in-br [class*="anim-delay-"] { animation-name: tilt-in-br; } // Let's add animation delays so we can // create staggered animation effect // ... } } ``` We also need to update the **Portfolio Grid** section in our `index.html`: ```html ...

Portfolio

Lorem ipsum dolor sit amet consectetur.

Threads

Illustration

Explore

Graphic Design

Finish

Identity

Lines

Branding

Southwest

Website Design

Window

Photography

... ``` Cool! Let's add another round of animations. This time we will get the keyframes code for the ['flip-in-hor-top'](https://animista.net/play/entrances/flip-in/flip-in-hor-top) animation and add it at the end of the `animista.scss`. ```scss // ... /* ---------------------------------------------- * Generated by Animista on 2020-1-29 21:26:34 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation flip-in-hor-top * ---------------------------------------- */ @keyframes flip-in-hor-top { 0% { transform: rotateX(-80deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } } ``` Add the animation class code too: ```scss .animista { // ... // Appearing animations &.appear { // Default animation options // ... // Slide in blurred animation // ... // Tilt in BR animation // ... // Flip in horizontal top animation &.flip-in-hor-top [class*="anim-delay-"] { animation-name: flip-in-hor-top; } // Let's add animation delays so we can // create staggered animation effect // ... } } ``` Finally, update the **About** section in our `index.html` file (simply add our CSS classes where needed): ```html ...

About

Lorem ipsum dolor sit amet consectetur.

2009-2011

Our Humble Beginnings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
March 2011

An Agency is Born

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
December 2012

Transition to Full Service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
July 2014

Phase Two Expansion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
Be Part
Of Our
Story!

... ``` From this point on, you can add just about any animation from the [Animista entrances category](https://animista.net/play/entrances) without much effort. The JS code stays the same, only the HTML and the CSS code need updating. Let's demonstrate this by adding a final round of animations to the team section. This time however, let's reuse the ['fade-in-bottom'](https://animista.net/play/entrances/fade-in/fade-in-bottom) animation that we already have and only update the **Team** section in our `index.html` like so: ```html ...

Our Amazing Team

Lorem ipsum dolor sit amet consectetur.

Kay Garland

Lead Designer

Larry Parker

Lead Marketer

Diana Pertersen

Lead Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.

... ``` Closing Thoughts ---------------- Congratulations, you have made it to the end of the tutorial! Hopefully it gives you an idea on how to liven up your website with neat scroll-based animation effects. A bit of CSS, HTML, and very little JS knowledge gives you lots of creative possibilities. You can try experimenting with different [entrance animations from Animista](https://animista.net/play/entrances). Careful though, once you get the hang of it, it is fairly easy to overdo it. As ever — use your own judgment. Resources --------- - [Tutorial Code on GitHub](https://github.com/sergej108/animistascrolltutorial) - [Tutorial Live Demo](https://animistascrolltutorial.netlify.com) Further Reading --------------- If you are just diving into CSS animation, here are a few places that may help you gain better insight and learn basics: - [CSS Animation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) - [CSS Animation on W3C](https://www.w3schools.com/css/css3_animations.asp) - [CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)

Services

Lorem ipsum dolor sit amet consectetur.

Services

Lorem ipsum dolor sit amet consectetur.

E-Commerce

Responsive Design

Web Security

Portfolio

Lorem ipsum dolor sit amet consectetur.

Threads

Explore

Finish

Lines

Southwest

Window

About

Lorem ipsum dolor sit amet consectetur.

2009-2011

Our Humble Beginnings

March 2011

An Agency is Born

December 2012

Transition to Full Service

July 2014

Phase Two Expansion

Be Part Of Our Story!

Our Amazing Team

Lorem ipsum dolor sit amet consectetur.

Kay Garland

Larry Parker

Diana Pertersen

Be Part
Of Our
Story!

sergej108

How to Implement Page Scroll Animations with Animista

Join Our Newsletter. No Spam, Only the good stuff.