[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

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

Ben_Meredith

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

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

F

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

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

Ekon_Launch

Any idea why it doesn’t work on mobile?

On mobile it’ll just disappear the object

ZSogo

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

Paulina_Urbina1

Hi Daniel, could you solve it?

D

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.

On%20Scroll%20Animaiton
Style%20Sheet%20Error Style%20Sheet

FelixACC

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!

FelixACC

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

A

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.

revealOnScroll_adjusted

fbiogradlic

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

Marie_Morcinkova
Badge

Hi, I ran into a little problem - the original code works well with “bounceIn” but other animations such as “flipInX” make the elements disappear as soon as the animation is finished. Do you know why that is?

Thank you for help!

Z

Hello. I was going to have this on scroll animation bounceIn for a button. I also had the typed text effect from another thread on this forum. It appears that both together won’t work. Does multiple code effects cause issues with one another? I put them both in their own section (like I added a new body end tag section for both the java and style sheet). Thanks for any help.

Edit: I’m not applying both effects to the same object. The bounceIn is on a button. The typed text effect is on a completely different text box.

Wesley_Rocha

I did the tests, but they are not working

C

Hey there Noah, we love your landing page resources but everyone desperately wants them to work for mobile. Any chance you’ll get to these codes on mobile as well as the collapsable page section code for mobile?

ThomasImpressive

Hey Noah, how you going? Having trouble implementing the single load on to my landing page. Removing one or both of the code in the red boxes interrupts the whole code & causes none of the objects to work.

Any help would be greatly appreciated.

Capture

M

Hi all, it dosen’t work on mobile, do someone know why?
also example page doesn’t work when you scroll down : https://landingpage.noahmatsell.ca/animations-on-scroll/

sam.gofast

Dustin ligeiro hahaha

C

Hey love the code, I’ve been using it for awhile now on many pages! I only have one issue. The animated text titles on my mobile view don’t seem to allow scaling and so in my mobile view all of my titles are misaligned unless i remove the animation stylesheet code.

adamsmithline

Tried to implement this at http://www.readyforbi.com/animated-test/ but I can’t get it to work. Any help would be greatly appreciated.

Ivan_RL

Totally loving the script!

Unfortunately, on Mobile, some of our headers get re-scaled back up to 100 (instead of staying at 60). This has the unintended effect of causing the title to go off the page. Below, show what the header should look like, versus what happens on Live.

Builder View

image

Live

image

Does anyone have a solution to this? The only way I can think of is to create a Desktop & Mobile only header, and have to write the animation line twice.

Thanks!

Reply


Terms & ConditionsCookie settings