Skip to main content

[How-to] Add CSS On-load Animations


  • Former Unbouncer
  • 1556 replies

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

  • Author
  • Former Unbouncer
  • 1556 replies
  • January 26, 2016

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


Love it! Thanks for this 🙂


Stuart_Mitchell

Liking this one, using it today 🙂


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • February 23, 2016

Anyone get this working with OnScroll 🙂 ? 


Rix_Maccuish

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


Noah
  • Former Unbouncer
  • 126 replies
  • March 22, 2016

Stefano
Forum|alt.badge.img+4
  • 627 replies
  • March 23, 2016

Hey Rix, did you get this to work?

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


Stefano
Forum|alt.badge.img+4
  • 627 replies
  • March 23, 2016

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


  • Author
  • Former Unbouncer
  • 1556 replies
  • March 24, 2016

Hey folks!

Did you wrap the scripts with: 

<script><br/></script>

?


Noah
  • Former Unbouncer
  • 126 replies
  • March 24, 2016

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?


D_Hendrik_Mulyana

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


pablosotomayor

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?


Forum|alt.badge.img
  • 12 replies
  • December 4, 2017

@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,


Emmapiterson

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


  • 3 replies
  • April 15, 2019

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


  • 19 replies
  • November 28, 2019

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.


Devin
  • 3 replies
  • February 12, 2020

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings