Step 1. add Animate.CSS HTML Tag

Go to "Settings" at the top and select "SEO" on the left. Now copy the code from below and paste it into the "Header Code" area on the right.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Click save.

---

Step 2. Open Weebly's HTML/CSS Editor

At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.

---

Step 3. Add CSS codes

On the left under "STYLES", click on "main.less". On the right, locate the "body" tag and add "display:none;" to it as shown below in orange:

body {
    display:none;
    width: 100%;
    height: 100%;
    background: #ffffff;
    color: #3e3e3e;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Now add the CSS code below directly beneath the "body" tag in the "main.less" file.

body.show {
    display:block;
}

---

Step 4. add jQuery Code

On the left under "ASSETS", click on "custom.js", and on the right, add the jQuery code below directly beneath "jQuery(function($) {":

// Site Fade In
$('body').addClass('show animated fadeIn');

Click SAVE.

---

You're done! Publish your site to see your pages fade in!

---

tips & additional information

Go to Animate.CSS to view their extensive collection of animations. If you're not diggin' the fade in effect, then simply choose another one from their list and just replace the "fadeIn" text in the jQuery from step 4 with the name of the new effect you'd like to use.

So, let's say we want to use their bounce in effect instead of a fade in effect for page transitions, just change the jQuery code from step 4 as shown below in orange:

// Site Fade In
$('body').addClass('show animated bounceIn');

Additionally, you can adjust the speed of the animation by adding the CSS code below directly beneath the CSS codes from step 3. Let's say we want to slow the animation down to 3 seconds. To do this, we'd change the "2" to "3" as shown below in orange:

.animated {
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
}

.animated {
     -webkit-animation-duration: 3s;
     animation-duration: 3s;
}

---

comments powered by Disqus