hey @Wahoo maybe you have this Scroll-animation Dropbox link, can you send me please. I tried to download but is not work for me.

Thanks!

I’ve got a bit of trouble making this script work for me. Am new to unbounce and have no coding experience either. I added 3 Javascripts to my landing page in the following order:

1. Infinite bounce (applied to an image in the header) - this works fine
2. On scroll animation (on the 2nd fold of my page) - this DOESN’T work
3. Cursor & Typing effect (this is in the last fold of my page) - this works fine

Now, if I delete the JS for the cursor & typing effect, my on scroll animation suddenly starts to work. Also, if I place my On Scroll Animation as the last script, and place the Cursor effect script above it, only the On Scroll works again. Seems like the 2nd Script, regardless of which one it is, does not work.

Has anybody else faced a similar problem?

P.S. I am unable to paste my script here. Just shows up as blank space

I’m having the same problem. The only animation that works is ‘bounceIn.’ The other options make the element disappear entirely. @Noah @Nicholas @Justin any ideas??

Thanks!

I’m also having this issue! Were you able to figure it ou?

Try adjusting the stylesheet code to this, to remove the error:

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

<style>
  .revealOnScroll{opacity:0;}
</style>

Hi Noah
First - Thanks alot for the code!
I did everything exactly according to your instructions. And I also put two types of animations on two different elements on my page, - the first works, the second doesn’t. And not only that - but the second animation code also made the image that was supposed to slid-in-right completely disapear from the page …
Would love your help
this is my page - you can see if needed : here

doesn´t work for me either

my god!! thank you so much my site look so much alive after I’ve applied this code!!!
magic 😉

I have found a much easier and effective way to do it. 🙂

Step 1: Add this code in the javascript and keep its placement to the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <script>
    AOS.init();
 </script>

Step 2 Create one more javascript file and add this code.
Update the ‘ #lp-pom-image-58 ’ with the ID of your page element. Here you can add multiple ids of the elements you want to give animation to

If needed, you can also change the animation effect by replacing ‘fade-up’ with any other effect eg: fade-up, fade-down, fade-right, fade-left, fade-up-right, fade-up-left, fade-down-right, fade-down-left, flip-left

You can check the effects from the link mentioned below
http://michalsnik.github.io/aos/

<script>
  $('#lp-pom-image-58, #lp-pom-image-63 ,#lp-pom-text-57, #lp-pom-button-60').attr({ 
    "data-aos":"fade-up",
    "data-aos-duration": "3000", // you can change the duration here 
    "data-aos-once":"true"  // for animation to happen just once
  });
</script>  

Step 3 Save and publish your page.

You can keep in the head

And if this still doesnt work try adding another js file in the second step

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script>
  $('#lp-pom-image-58, #lp-pom-image-63 ,#lp-pom-text-57, #lp-pom-button-60').attr({ 
    "data-aos":"fade-up",
    "data-aos-duration": "3000", // you can change the duration here 
    "data-aos-once":"true"  // for animation to happen just once
  });
</script>  

And if you want you can remove the CSS link file from the first step and add it separately in the CSS file
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Yes it might not be working because of some adding code which you have used.

I will share the dummy link of a page which i just created and added animation to it. You can check it source code and copy the script from it which might help

http://unbouncepages.com/animation-test-zaid/

Hi there, I followed the steps and everything works just as fine. Thanks! 

But when i try to add a smart back to top button to my landing page, (one of your other tutorial) all of the animations I’ve made so far are disappearing and only the back to top button works then. 

Any clue where that may come from ? 

thanks a lot 

@Alexia_Knewledge Do you have your page URL handy I can take a look!