If you've used the internet recently, you've probably noticed a design trend popular on app landing pages, personal websites, and all kinds of other websites: elements that are animated to appear on the page when you scroll to that point. Although it appears fancy, this effect is ridiculously easy if you utilize a little bit of javascript and two external frameworks. Let's walk through creating a simple animated webpage from scratch.
Setup Your Directory
First, I'm going to create a directory called animate and create a basic index.html file, as well as files for the CSS and Javascript libraries that we'll use.
code$ mkdir animate
code$ cd animate
animate$ touch index.html
animate$ mkdir css
animate$ touch css/animate.css
animate$ mkdir js
animate$ touch js/wow.js
After these commands, you should have an animate folder with 2 subdirectories and 3 files in total. Now let's setup the links to the Javascript and CSS files in index.html.
Index.html
<head> <title>We're going to animate this web page</title> <link rel="stylesheet" href="css/animate.css"> <script src="js/wow.js"></script> </head>
Next we'll need some boilerplate code for our simple page. The only important aspect here is to have enough spacing to ensure that we can scroll down, which will allow us to test the functionality in the browser.
<body> <h2>Paragraph 1</h2> <p>Lorem Ipsum etc. etc. [edited for brevity] </p> </body>
You should add a few more paragraphs here with whatever elements or text you want your webpage to contain.
Import Libraries
The next step is to import the WOW.js library, which you can see in action here. You'll want to export the library from this Github file and paste it into the js/wow.js file you created.
At this point we'll also add in animate.css, which has a whole repertoire of animations. Here's the Github file to paste into css/animate.css.
One thing to note at this point is that if you're planning on using either of these libraries as production code you should use the min versions of each one (wow.min.js or animate.min.css), which will reduce load time. But if you're trying to understand how they work better and navigate through the different options, the fully-fledged files are much easier to work with.
Connect The Dots
Now that the wow.js code base is accessible and in the directory, we need to initialize it with a script tag in the head of the index.html file.
<head> <title>We're going to animate this web page</title> <link rel="stylesheet" href="css/animate.css"> <script src="js/wow.js"></script> <script> new WOW().init(); </script> </head>
Finally, we'll want to choose some animations for our different elements on the page that we want to appear on scrolling. For example, we can take the paragraph from before and a div tag to it with a slideInRight class. To test different tags, just use the drop down menu on this page.
<div class="wow slideInRight"> <h2>Paragraph 1</h2> <p>Lorem Ipsum etc etc. </p> </div>
At this point, any of the animations in the CSS library should work to animate the page! Play around with all of the options and see which ones suit your needs best. If you have any questions feel free to let me know in the comments.