[How-to] Add CSS On-load Animations

  • 26 January 2016
  • 22 replies
  • 876 views

Here’s a script that allows you to apply a quick, smooth animation to any visual asset on your page when the page loads. This is handy if you’re trying to draw subtle attention towards a hero image on your page. 

A great example of this can be found when you visit Mailchimp’s website (see below).

The effect uses the  animate.css library, which you can read more about here

This is what the final effect looks like on an Unbounce landing page:
http://landingpage.noahmatsell.ca/animations-1/

**************************
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
**************************

Scripts Needed:
Grab the latest javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<script>
//The page element that will be animated on page load.
var yourElement = "#lp-pom-image-54";
//The effect that will be applied to your page element. See https://daneden.github.io/animate.css/ for full list.
var yourEffect = "slideInUp";
var effectClass = "animated " + yourEffect;
jQuery( document ).ready(function() {
  jQuery(yourElement).show().addClass(effectClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    jQuery(this).removeClass();
  });
}); 
/**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-03-028
*/
</script>

Instructions:
Step 1.
Paste the script into your javascript box and set the placement to ‘Before Body End Tag’

Step 2.
Replace the value of the yourElement variable with the ID of your target page element (found in the righthand Page Properties pane).

Step 3.
Replace the value of the yourEffect variable with your desired effect. See here for a full list of effects.

Step 4.
Hide the animated page element by adding the following CSS to your landing page Stylesheets:

#lp-pom-image-1 { display:none; }

Step 5. 
Replace #lp-pom-image-1 with the ID of your target page element.

**************************

Testing:
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion:
This little animation can be used in many different ways. For example, here’s the same effect being used in tandem with a non-looping .GIF. If you find an interesting way to use this, be sure to share a .gif or video in the comments below and show us what you’ve made. Happy animating!


22 replies

Also big shout out to Noah from our Technical Team for pulling this code + tutorial together!

Love it! Thanks for this 🙂

Liking this one, using it today 🙂

Userlevel 7
Badge +4

Anyone get this working with OnScroll 🙂 ? 

I followed the instructions and I get invalid script. Not sure what I’m doing wrong. I’m trying to add a bounceIn animation to a popup box (#sg-popup). 

Userlevel 7

Hey Stefano, Check out my most recent post here!

Userlevel 7
Badge +4

Hey Rix, did you get this to work?

It also shows up as invalid for us, but it still works. Thoughts anyone?

Userlevel 7
Badge +4

You sir are a gentleman & a scholar. Thank you!

Hey folks!

Did you wrap the scripts with: 

<script><br/></script>

?

Userlevel 7

The CSS validator is showing this warning because of the  tag in the first line of the code. This won’t affect your CSS at all, but if you’d like to get rid of the warning you should be able to move the tag to the Javascripts section of your page with placement “Head”.

Brilliant as usual Justin!.
Love it
Thanks!

Nice going Noah!

Anyway to delay this effect like the on-scroll stuff?
Set a 1000ms delay for the page to load?

Hi, @noah what’s the different between your post and with this post? .  or both of posts are same ? 

hey noah, I’m trying to get on-load working along with on-scroll. I was trying to get you other post but it does not exist. How can I get both to work together?

Badge

@Justin - Is it possible to animate multiple items on-load?

Hello,

Never, you can always use css3 webkit animations. When you try do animations using any j query plug in, then sometimes the site become slow. After writing css and js, try to minify the files using online editors. Mainly websites run slow when the used images are not properly optimized or we used more plugins.

Hope this Helps!

Regards,
Techtiq Solutions,

Valuable information on your blog and I really appreciate your work…

I’d love to use this for several elements with different animations on same page. Is this possible? (IE text fades in from let and right upon load)

Hi, I am adding the code to unbounce but I keep having issues. Can someone please help me figure out what I’m missing ?

Much appreciated!
Roberta

To those who wonder -

OnLoad Animation does not work on preview mode - need to be a published page // Noah OnScroll Animation however works on preview mode.

Great tip, one problem I’m running into is when using it on text. My main hero text of the page (https://www.contentonemedia.com) has a line height of 86 and a text size of 100+ so after fadeInRight animation is done it then increases the line height for some reason. Any workaround? It also cancelled out my type-text effect animation on section 4 of the page, no idea why.

Reply