Hi Rob,

I use this to save me the effort…

https://coveloping.com/tools/css-animation-generator

You should then be able to copy and paste the css and add the necessary class tags into your html.

Hope that works for you 🙂

Cheers

Stuart.

---

This looks like a fantastic resource for people looking to integrate these effects into their landing pages. Do you have an example page where this lives, Stuart? I’d love to see (and reference) it! 

---

Hi Justin,

I’m currently building an online store using shopify for one of our clients. One thing that we wanted to do was to try and increase the amount of people who actually use an account so it’s easier to follow up with marketing and special offers at a later date. We decided to add a shake to the sign in / register links on load to encourage people to use them. 

It’s too early days to know if this is working or if it needs another approach but you can see the animation in action…

http://www.dolleduphair.co.uk/

I will put this into a working example on one of our UB landing pages later today. I use the shake quite often with a delay to give people chance to see the content, then the form gives a little shake to remind them to signup to something. We’ve seen a small but definite increase in conversions from that extra subtle nudge. 🙂

Cheers

Stuart.

P.S: I now know more about hair extensions than I ever expected to in my whole life!

---

Hi,

Here we go… please see the example added to what is now becoming my Unbounce demo page for things like this.

http://l.temporary-hair-extensions.com/hideandshow/

Cheers

Stuart.

---

Hi Stuart,

Great stuff, thank you very much for taking the time to write all this up. It’s definitely something we’ll be trying on our latest page!

All the best,

Rob

---

Anytime mate, happy to help 🙂

---

Hey Stuart, 

This is a really interesting approach. I could definitely see this effect working on a button, so I’m really curious to see what the effect is when it’s applied to text elements. 

One thing I noticed is that when I click  Sign in  _or  _Create an Account, _it takes me to the appropriate page but the animation re-loads again. Is this intentional? Or a limitation of using the script across the entire site header? 

---

Also, if you want me to change your account from “Unbounce Expert” to “Hair Extension Expert”, just let me know. ;) 

---

Happy to hear this, Rob! I’d love to hear how your testing goes. 

---

Lol, you’d have to add Brazilian waxing expert as well as we are working with a beauty salon also! In answer to your question the bounce won’t be on the signed page I just haven’t applied the logic using the liquid templating system yet but it will happen.

---

Hi all! 

Is there a way to trigger the animation on scroll just like lyft homepage signup button? 

https://www.lyft.com/

Thank you! 

---

I would be curious to know about this as well! Hopefully someone from our Community can chime in on this one, would be interested to see an ‘on-scroll’ implementation. 

---

I made some research and found this: http://mynameismatthieu.com/WOW/

Can I use it with Unbounce? 

---

Rob, I had the same problem as you.  I figured out a pretty painless solution.

First

I downloaded the arrow shown on CodePen, and then edited to be the color I wanted (#f1f1f1).  

Use mine if you like: https://drive.google.com/file/d/0B0DR13E0Zw_WYTBkZkJocmxqYVU/view?usp=sharing

Then I uploaded the .PNG file to my Unbounce page, just as I would any image.

Second

Using this website for help:

https://coveloping.com/tools/css-animation-generator

I wrote the following CSS Stylesheet:

.animated { 
    -webkit-animation-duration: 2s; 
    -moz-animation-duration: 2s; 
    -o-animation-duration: 2s; 
    animation-duration: 2s; 
    
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 

    -webkit-animation-iteration-count:infinite; 
    -moz-animation-iteration-count:infinite; 
    -o-animation-iteration-count:infinite; 
    animation-iteration-count:infinite; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 
    40% {-moz-transform: translateY(-30px);} 
    60% {-moz-transform: translateY(-15px);} 
} 

@-o-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 
    40% {-o-transform: translateY(-30px);} 
    60% {-o-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce;     
    -o-animation-name: bounce; 
    animation-name: bounce; 
}

Third

I used some very simple Javascript to assign the classes "animated bounce" to my arrow image:

I placed this code “Before Body End Tag”

_ Note: The “lp-pom-image-201” name is relevant to my page only.  Click on your arrow, look at the Element Metadata, and find the ID.  Use that ID instead of mine.  _

In Summary

I hope this helps!

---

Awesome hustle, John! I’m going to reach out shortly to connect with you on this. 

---

This is a bit different, but we also have instructions on how to do an animated .CSS onload animation which is pretty neat. Check it out here:

https://community.unbounce.com/t/tips-scripts-css-on-load-animations/2868

---