[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

F

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!

Vertical_Leap

Hi @Noah - Thanks for the great script!

One recommendation I have is to add type="text/css" to the CSS script - if you do that it will validate in Unbounce so you won’t get a warning.
See my fork here: https://gist.github.com/HenryCarless/25e1d4643267e179a36edeb2c1f73bc0

F

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

ZSogo

yeah. the unbounce tech support helped me solve it.

Basically the scripts are actually all loading a completely different version of jQuery. So make sure scripts are all consistently using the same very of jQuery.

Refer to the highlighted lines in these screenshots and replace those with the script below (note I cant paste scripts in this window, so add the opening and closing script tags yourself):


opening script tag
src=“https://code.jquery.com/jquery-3.4.1.min.js”
integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=”
crossorigin=“anonymous”> closing script tag

Vertical_Leap

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>
Ben_Meredith

Hi any reason this wouldn’t work at all? I followed directions exactly and tested multiple things.

M

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

M

Hey Noah
Did you get my question? I would love to get your help can you please answer and let me know how to solve the problem? Do you need to see the code ? I can past the code here if that will help…
thank alot 🙂

Roberto_Bolanos

doesn´t work for me either

M

Hey Roberto

I found a solution- just make for each animation a deferent code, That means- don’t put it with comma one after another- put a whole deferent code for each element you want animated ! It works

Joyce_Thamrongvisith

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

M

Great 👍

בתאריך יום ו׳, 22 במאי 2020 ב-17:01 מאת Joyce Thamrongvisith via Unbounce Community <unbounce@discoursemail.com>:

Zaid_Nazir
Badge

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.

D

Is it possible to run it in loop?

M

Dear Zaid
your java cods for animation are not working for me…

  1. in the second java - you didn’t mention where to put it (Head? Before/After body and tag?)
  2. it should work without any CSS code?
    I can’t understand why it’s not working for me…
    thanks
    Merav

‫בתאריך יום ב׳, 6 ביולי 2020 ב-9:57 מאת ‪Zaid Nazir via Unbounce Community‬‏ <‪unbounce@discoursemail.com‬‏>:‬

Zaid_Nazir
Badge

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" />

M

Hey Zaid
First of all - thank you very much for your prompt response!
It still does not work for me, but I may be doing something wrong … Can you take a screenshot of the JS codes that are on your page where the animation works? … And if you also put CSS code then I would love to get a screenshot of it …
Something does not work for me and if your way does work, it means that it will be possible to put all kinds of animations and that’s great … because in the way I have had so far - only two manage to work …

By the way - do you think that other codes I have may affect your codes? and maybe this is the reason it’s not working?
Thanks for your help

Merav

‫בתאריך יום ג׳, 4 באוג׳ 2020 ב-8:36 מאת ‪Zaid Nazir via Unbounce Community‬‏ <‪unbounce@discoursemail.com‬‏>:‬

Zaid_Nazir
Badge

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/

T

I have added the code and on the desktop version everything is good but when I look at the live mobile page it has elements missing and does not load correctly… Any advice or a fix for this??

L

How do I get the two codes for slide right and slide left to work? They don’t seem to be working…

jennifer1

This URL is dead. 😦

Charly_Elbaz

Hello,
I am having a problem with this animation.
Animation works very well in desktop format, but on mobile it doesn’t.
In fact, the elements I want to animate are at the top of the page and I have the impression that the scroll does not trigger and nothing happens.
For the other elements which are lower in the page it works because the scroll can be done.

How do I animate the elements at the top of the page

Could you help me ?
Thank you !

S

I am having trouble figuring out why slide in part not working.
The bounceIn part works.
addAnimationData(’#lp-pom-text-296’,‘bounceIn’,‘1000’); //works
addAnimationData(’#lp-pom-text-270’,‘bounceIn’,‘1001’); //works
addAnimationData(’#lp-pom-text-1285’,‘bounceIn’,‘1002’);//works
addAnimationData(’#lp-pom-text-273’,‘slideInLeft’,‘1003’); //not working
addAnimationData(’#lp-pom-text-282’,‘slideInRight’,‘1004’); //not working
addAnimationData(’#lp-pom-text-298’,‘slideInRight’,‘1005’); //not working

Carmine_Liccardi

Hi! I’ve followed all the step and the animatons work great on desktop but thery are very bugged on mobile like headline bigger out of bounderies. How can I deal with it?

Jose_Natan_da_Silva

O meu não funcionou mesmo seguindo todas as etapas, alguém pode me ajudar?

Reply


Terms & ConditionsCookie settings