Animations are a great way to add visual excitement and motion to your websites, and the popular animate.css library has provided an easy way to add CSS-based animations to any website. What if you want to only trigger these animations once the user has scrolled to a specific section of your website, though?
Using CSS animations is a straightforward and easy method to add eye-catching visual effects to any HTML website. One of the most popular libraries for CSS animations is animate.css. While the library may be small, it is a perfect tool for novice web developers who are looking to add more spunk to their website without the complex use of keyframing. While this blog post will mainly be discussing how to use WOW.js, the animate.css file is extremely versatile and can be used with other files as well.
Some of the many animations that you can add to elements on your site include:
- Static animations: These types of animations appear right when you load and open up a webpage. In other words, no scrolling (WOW.js) involved!
- Scroll animations: These types of animations appear when the user scrolls into the element’s view on a webpage. This is the type of animation we will be focusing on with WOW.js. This animation can also be created with jQuery.
- “Special” animations: These quirkier animations can be used on elements when you really want to capture the user’s attention instantly with an eye-catching animation.
Adding animate.css and WOW.js to your project
A major benefit of using animate.css for your website is that the CSS code is held in just one file, which simplifies your project immensely. Once you add the CSS file to your project, all you must do is link it to your HTML in the head of the document. Alternatively, you can simply link the CDN file to your HTML document. Depending on whether you directly add the animate.css file or simply link to the CDN file, only the href will slightly vary:
<link rel=“stylesheet” type=“text/css” href=“animate.css”>
<link rel=“stylesheet” type=“text/css” href=“https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css”>
Install animate.css and WOW.js
Click the links below to view the animate.css and WOW.js files on CDN:
- animate.css Non-minified Version: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
- animate.css Minified Version: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
- WOW.js Non-Minified Version: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
- WOW.js Minified Version: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js
(Note: “Minified” code refers to the removal of white space and shorter characters in order to preserve functionality but create more compact file sizes. This will make the code more difficult to read and edit for those who want to customize or make changes to the code.)
Using npm to install animate.css and WOW.js
npm install wowjs
One benefit of installing WOW.js via npm is that it automatically also installs animate.css as a dependency. This way, you do not need to concern yourself over following the instructions of downloading animate.css with one of the options discussed above. Similar to adding the file directly or using CDN, animate.css will be linked in theof your document (the href path will differ depending on the file location):
<link rel=“stylesheet” href=“node_modules/animate.css/animate.css”>
For the script, you can add WOW.js to your website by linking it at the bottom of your HTML document, just below the closing tag. This must be followed by a <script> tag to activate WOW.js, as demonstrated below:
Adding animations to elements
Once both files are added to the project, it’s time to select the HTML elements that you’d like to animate upon scrolling. Any element with a class of .wow will remain hidden until the user reaches it on the page. You can apply this class to headings, text, images, or even a larger portion of your website enclosed in a <div> tag.
Add a class of .wow to any HTML element you’d like to animate with WOW.js, such as an h1 element:
<h1 class=“wow”>Welcome to my site!</h1>
Animate.css has 75 different animation styles to choose from, all of which can be demoed on the official site (see above). Once you’ve selected an animation you’d like to use, add its name as a CSS class on the element to animate, along with the class “wow.” Here are a few examples of animate.css and WOW.js in action on your HTML document:
<h1 class=“wow fadeInRight”>Welcome to my site!</h1>
The h1 element will now fade in right once the user has scrolled to it on the page.
<div class=“wow pulse”>Click here</div>
The content enclosed in the <div> tag will now create a pulsing effect on the site once the user has scrolled to it on the page.
Alterations to WOW.js Animations
There are slight adjustments that can be made to the CSS animations through some in-line editing on your HTML document. You can add these four properties after class = “wow” and even combine them within any HTML tag. Essentially, these simply properties are a great and effortless way for users to add versatility to the scroll animations. Below are descriptions of the four properties you can alter when animating an HTML element with WOW.js:
- data-wow-delay=“_s”: Typically, the element automatically appears when the user scrolls to its location. With this property, you can delay the animation for _ seconds.
- data-wow-duration=“_s”: You can make the animation last _ seconds, which is useful for speeding up or slowing down the element’s appearance.
- data-wow-iteration=“_”: With this property, you can make the animation repeat, or iterate, _ times before it turns static on your page.
- data-wow-offset=“_”: This property allows the animation to start _ pixels from the browser edge before animating.
Alternative Animation Libraries to animate.css and WOW.js
View the directions and documentation for using Anime.js on the Github site.
Hover.css produces eye-catching effects on your website by simply hovering your mouse over animated elements. You can use this animation library to add more spunk to ordinary, 2D elements such as buttons, logos, or images. On the Hover.css website, you can browse and test the various animations such as background, 2D, shadow, and outline transitions by hovering your mouse over each button. Those who plan on using one or few Hover.css animations can simply download the file and copy/paste the specific animation into their own stylesheets. However, if you plan on using many Hover.css animations, then you can essentially follow the same procedure of installing and linking the Hover.css stylesheet to your HTML document. You will have access to all Hover.css effect to animate any appropriate HTML element on your site.
To view the specific instructions and documentations for installing and using Hover.css, go to the official Github site.
To create the iconic typewriter or typing effect, a popular option for web developers is to use Typed.js. Many websites use this animation library to create string-typing effects on pages, including the popular group workspace platform, Slack. Simply install the Hover.css library via npm or link the CDN file to your HTML document. With essentially one <script> tag, you can animate an HTML text tag with the typewriter effect. With enough tweaking, you can create more advanced typing effects on your website for an even more stunning effect. For instance, you can create the effect of the computer pausing as it types or the effect of deleting letters in a word.
The official Github site includes all of the source code and detailed documentation on how you can customize the typing animation to meet your personal preferences.
As the title implies, this CSS library is a collection of animations that all “shake” HTML elements on your website. This quirky animation is perfect if you want to draw attention to a certain image or section of your website. It also makes the elements of your website more interactive, which is always a plus for front-end development. You can experiment with the variation of shake animations yourself on the CSShake website by hovering over different elements on the page. The source code on CSShake Github also includes detailed documentation that describes how to create your own custom shake animations. You will have to understand and learn to adjust the jQuery properties by reading the documentation.
When you are ready to install CSShake onto your own project, follow the instructions for installation on the Github site.
- 10 Reasons Why To Choose Magento for Your E-commerce Website
- A look at Google Chrome’s New Security Update for 2017
- Did you just launch a new website? The ultimate guide on what to do next.
- Designing a simple navigation bar with Bootstrap 4
- WordPress FAQ
- WP Engine’s Staging Area has Revolutionized Our WordPress Development Process
- Web Design Services
- How to get rid of the “You have mail” Unix message
- Sunlight Media is a Top LA Web Designer, Says Research Firm Clutch
- Sunlight Media wins 2018’s Top Software Developers in the US
- Fulfill Your Business’ Design Needs with Powered Template
- Magento FAQ
- How to Minimize Your Landing Page’s Bounce Rate
- An overview of CSS Selectors
- Getting Started with Animate.css [Tutorial]
- Magento Website Development: The Top 9 tips to improve sales
- 5 Tests That Will Ensure Your Website Stands Out
- Working with HTML5 Forms: The Ultimate Guide (2018 Update)
- Understanding Semantic Code
- An introduction to the htaccess file:The Ultimate Guide (2018 Update)
- Designing a Website with Lead Generation in Mind
- Current Web Design Trends For Better User Experience
Crystal is a senior at a public high school in Santa Clarita, CA. She has been invested in technology since her sophomore year, when she took her first Web Development course and used Dreamweaver to design her first websites.
Crystal hopes to continue her studies in computing and technology in her post-secondary education.