Using WOW.js and Animate.css for Scroll-Triggered Animations (2019 Update)

WOW.js and Animate.css

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?

This can of course be accomplished via jQuery, but using the JavaScript library for that function alone adds unnecessary bulk for a function that can otherwise be accomplished by a simple script. WOW.js solves this problem, offering an easy-to-use library for adding animations triggering by scrolling, with no jQuery required, in only 3kB.

This post will provide a guide on using WOW.js and animate.css for your web projects, including various options available for installing it.Click To Tweet

If you are interested in learning about different animations besides scroll effects, head to the last section of this blog post for a list of other CSS and Javascript animation libraries.

About animate.css

Using WOW.js and Animate.css for Scroll-Triggered Animations 2019 update

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.
  • Click animations: With a combination of jQuery and Javascript programming, you can create animations on your website that run when the user clicks on a certain element.
  • “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.

About WOW.js

WOW.js is a Javascript file that, when added to your HTML document, can create compelling and dynamic effects on a site. This scroll effect is one of the most popular options for web designers, as it used to be licensed as open-source code under MIT. When you are on a website that implements WOW.js, the animated elements will magically appear as you scroll down the site. For an example of this effect, visit the official website for WOW.js. It is a great design tool to utilize with animate.css.

Compared to other animation options with Javascript, WOW.js is extremely popular for its simple, bulk-free code. Note that you can use other CSS animation libraries to activate WOW.js; WOW.js just treats animate.css as its default library. This includes libraries such as CSShake or DynCSS. WOW.js is free to use for open source project, although requires purchase of a license for any commercial projects.

Adding animate.css and WOW.js to your project

In order to start animating your website, the first step is to add animate.css and WOW.js to your HTML document. There are a few ways you can go about adding the files into your HTML project. You can download the distribution for animate.css and WOW.js from each of their respective official sites, or simply link to the files available from CDN. CDN hosts a vast collection of libraries for Javascript and CSS.

Click the links below to view the animate.css and WOW.js files on CDN:

(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.)

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:

<head>

<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”>

</head>

Using npm to install animate.css and WOW.js

Alternatively, you can use a package manager such as npm (Javascript package manager) to install both animate.css and WOW.js just by merely typing a few keywords into the command line. From the root of your project directory, run the following command from the command line:

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:

<script src=“node_modules/wowjs/dist/wow.min.js”></script>

<script>

new WOW().init();

</script>

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

Bounce.js

Bounce.js is an easy-to-use tool to create stunning CSS3 and Javascript animationsBounce.js is an easy-to-use tool to create stunning CSS3 and Javascript animations for your website in just minutes. Developers can experiment with a list of various animations on the Bounce.js web tool to generate static keyframes and even customize the animations directly in the web browser. When the animation satisfies your standards, you can export the CSS code directly from the site and paste it into your project. Then, you can use the animations that you created in the web browser and directly apply it to elements on your HTML document. The web tool even generates a unique, shortened URL that allows you to access your animation on a new web browser in case you want to make edits to it at any time.

To learn more about creating animations with Javascript and installing the Bounce.js library into your project, you can follow the instructions for installing the Bounce.js library on its Github site.

Anime.js

Anime.js, which utilizes CSS properties, Javascript objects, SVG, and DOM attributes to create impressive animationsAnother popular animation library is Anime.js, which utilizes CSS properties, Javascript objects, SVG, and DOM attributes to create impressive animations. Julian Garnier’s collection features dozens of seamless animations that you can directly add to your own site. You can view the various animations created with Anime.js on the Anime.js Codepen collection. Unlike WOW.js, this animation library is not necessarily used to animate HTML elements on a site. Rather, Anime.js is used to create separate animated “illustrations” for your website altogether to add to its visual appeal. Some of my favorites include Garnier’s line drawing animation and the layered animations demonstration. To add the Anime.js library to your project, you can install via npm.

View the directions and documentation for using Anime.js on the Github site.

Hover.css

Hover.css produces eye-catching effects on your website by simply hovering your mouse over animated elements.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.

Typed.js

Using WOW.js and Animate.css blog post: Typed.js overviewTo 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.

CSShake

CSS shake is a collection of animations that all “shake” HTML elements 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.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC