[Tips & Scripts] On-Scroll Animations

I鈥檓 having the same issue here. Is there anyone who can reply with the solution. This reply is in relation with applying other effects within the script.

Thanks in advance

Love these animations! This script is really helpful!

I鈥檝e been running into the same issues on mobile and I think I have a solution鈥

For me, on mobile, I am only having the scaling issues with text that is already on the screen when the page loads. As it turns out, I think it鈥檚 just related to animate.css. Unbounce is using -webkit-transform: scale() to adjust text sizes on small screens. I think the animations are interfering with unbounce鈥檚 scaling via css transform.

To deal with this, I just wrapped each of my text objects in a box in the unbounce editor and applied the animation to the box instead. Then, I commented out the line that was applying animate first on touchscreen devices. Now it鈥檚 all working!

I also made some additional adjustments to the script so elements are animated when the are 1/3 of the screen height from the bottom of the screen鈥ust personal preference.

Hi @justin can you send me the link to me too please. because I have the same problem with the dropbox link.
Thanks

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!

Hi guys, doesn鈥檛 seem to work for me?

I鈥檝e put in the javascript and stylesheet code, but no animation works on the live page.

Please see the attached images for the code, stylesheet code & stylesheet error (yet it doesn鈥檛 say what the error is!).

*all Javascript鈥檚 have the 鈥榖efore body end鈥 tag.

Any help would be greatly appreciated.

Thanks.

Style%20Sheet%20Error Style%20Sheet

2 Likes

Hi Daniel, could you solve it?

I鈥檝e 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鈥橳 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

Any idea why it doesn鈥檛 work on mobile?

On mobile it鈥檒l just disappear the object

I鈥檓 having the same problem. The only animation that works is 鈥榖ounceIn.鈥 The other options make the element disappear entirely. @Noah @Nicholas @Justin any ideas??

Thanks!

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鈥檛 get a warning.
See my fork here: https://gist.github.com/HenryCarless/25e1d4643267e179a36edeb2c1f73bc0

I鈥檓 also having this issue! Were you able to figure it ou?

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=鈥渟ha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=鈥
crossorigin=鈥渁nonymous鈥> closing script tag

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 any reason this wouldn鈥檛 work at all? I followed directions exactly and tested multiple things.

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鈥檛. 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

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 :slight_smile:

doesn麓t work for me either

Hey Roberto

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

my god!! thank you so much my site look so much alive after I鈥檝e applied this code!!!
magic :wink:

Great :+1:

讘转讗专讬讱 讬讜诐 讜壮, 22 讘诪讗讬 2020 讘-17:01 诪讗转 Joyce Thamrongvisith via Unbounce Community <unbounce@discoursemail.com>: