[Tips & Scripts] On-Scroll Animations

design

#61

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.


#62

Dustin ligeiro hahaha


#63

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/


#64

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.


#65

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?


#66

I did the tests, but they are not working


#67

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.


#68

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!


#70

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


#71

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.