In a previous article we showed how to create a portfolio using isotope.js. Lets take this one step further and add on scroll animation effects. So when we scroll down the page we want the HTML elements on the page to have an animation effect as they appear on the screen.
1. Hookup CSS Animation
The animate.css file controls the actual animations. Connect this file to the head of your document:
<link rel="stylesheet" href="css/animate.min.css">
We need one more file to control the timing of these elements, this is the file that lets the animations happen when the element enters the page when we scroll down the page (otherwise they would just happen at page load so we would never see them).
Connect this file to the end of your document:
Add the following to your js file to initiate the script.
3. Set Animations on HTML Elements
Now we’re ready for the fun part, adding the animations to our elements. Adding the animations is as simple as adding CSS classes to the HTML element that you want to animate on page scroll. Add the class “wow” and also one of the following classes (these choose the animation):
In the portfolio demo we are building we’re adding the animation to the portfolio columns, example:
<div class="col-sm-3 isotopeSelector illustrations wow flipInX"> ... </div>
That’s all it takes, now our portfolio has amazing on scroll effects! You can check out the wow.js github page for more customization details (timing, etc).
It should be said, like with any animation don’t overuse the animation effects on your website!