Adding Animate.css to MyPhoto

As it's a pure CSS library, integrating Animate.css with MyPhoto is exceedingly simple. First, use NPM to download Animate.css:

    npm install animate.css

Next, include the library in the head of MyPhoto, after the other CSS includes:

    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css" />
  <link rel="stylesheet"
    href="node_modules/animate.css/animate.min.css" />

To ensure that we are set up correctly, let's add an animation to the body of our web page. To use any of the classes provided by Animate.css, we must include the animated class on the element:

    <body data-spy="scroll" data-target=".navbar" class="animated">

If we take a look at animate.min.css, we will see that all selectors depend on the animated class to be defined, and the animated class itself provides the base animation rules:

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    .animated.hinge {
        -webkit-animation-duration:2s;
        animation-duration:2s
    }

To apply the animation itself is just as simple—add the desired class to the element. To make MyPhoto fade in, we just need to apply the fadeIn class to the body element:

    <body data-spy="scroll" data-target=".navbar" class="animated 
    fadeIn">

If you fire up the page, you should see the page slowly fade in as it renders. If you do not see this animation, ensure that you have the correct path to animate.min.css in the head.

Now that we have Animate.css added to our project and working, let's add some emphasis to some of the core elements in our site.

Table of Contents for Adding Animate.css to MyPhoto

Create new playlist

Sign In

Sign Up

Table of Contents for
Adding Animate.css to MyPhoto