[Tips & Scripts] On-Scroll Animations

I’m 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’ve 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’s 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’s 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’s 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…just 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’t seem to work for me?

I’ve 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’t say what the error is!).

*all Javascript’s have the ‘before body end’ tag.

Any help would be greatly appreciated.

Thanks.

Style%20Sheet%20Error Style%20Sheet

2 Likes

Hi Daniel, could you solve it?

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

Any idea why it doesn’t work on mobile?

On mobile it’ll just disappear the object

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!

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

I’m 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=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=”
crossorigin=“anonymous”> 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’t 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’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

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’t 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’ve applied this code!!!
magic :wink:

Great :+1:

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