[How-to] Add CSS On-load Animations


#1

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 here:
https://gist.github.com/noahub/d9f2513d128d9ccb7e76

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!


Animated CSS arrow bounce
The Ultimate List of Unbounce Tips, Scripts & Hacks
How to make delay page
#2

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


#3

Love it! Thanks for this :slight_smile:


#4

Liking this one, using it today :slight_smile:


#5

Anyone get this working with OnScroll :slight_smile:


#6

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


#7

Hey Stefano, Check out my most recent post here!


#8

Hey Rix, did you get this to work?

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


#9

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


#10

Hey folks!

Did you wrap the scripts with: 

<script><br/></script>

?


#11

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


#12

Brilliant as usual Justin!.
Love it
Thanks!


#13

Nice going Noah!


#14

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


#15

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


#16

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?


#17

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


#18

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,


#19

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