[Tips & Scripts] On-Scroll Animations

Show first post

107 replies

Noah
Userlevel 7

Hey Elvis, I mentioned this in a comment below:

Because Preview loads over https, any http content will not load (as it throws a mixed content error). The jquery and modernizr references in my script were both referencing http versions, which caused the animations to break in Preview.

I’ve updated my script by removing the http references (see here), so now the animations should work as expected in Preview!

Give it a try and let me know how it goes!

J

This is awesome, Noah! Thanks for the update. 

J

I’ve got this implemented nicely on a test page.  You can check the page at www.thehoustonweddingband.com  

One thing I need help with though:  How do you get the animations to only load once.  I don’t want them to animate again if someone scrolls to top of screen and back down.  That’s probably a simple thing I’m missing.  Anybody have any idea?

R

That’s pretty awesome @Noah thanks a lot its worked perfectly for me.
@Joe_Hargrave1 I had to make sure my cache was cleared when I republished to test in browser.

R

Hi @Noah just noticed that for the mobile version the elements that are animated in the Desktop aren’t showing in the mobile version, just blank. Any reason why?

lamp

Hi Noah - Thanks for the great script.

On mobile though, I noticed the text for the text animation (bounceIn effect) for the title does not scale to 60% of the desktop version, causing the text to render off screen. Is it the expected behavior or is their a workaround?

Thanks!

lamp

Hi @Noah - The advice is good. And looking forward to a way around text scaling on animation. For now I have to put a smaller font on mobile (can’t use %) one and not display on desktop and vice versa.

There’s just one issue, I put the responsive script you suggest from Mark Wainwright but it’s at the end of the script editor. The other on scroll animation scripts was higher up on the JS variant lists. So other animation seemed to animate first, before the header text animation, probably due to the script execution order. Is there a way to order the Variant Scripts? (Now I have to erase the scripts to put them higher on the order)

Appreciate your advices!

sabariiyappan

Hi All,

I want my unbounce page with different menu display for you reference pls check http://bairohealth.com/

Usually i will try buttons for link so this time I want something different … pleease help me

Y

I can’t seem to get the CSS “approved”, which I think is causing my page not to work properly. ANy ideas?

Also, does it matter where we put the .js? I have placed it in the

W

I have downloaded the .unbounce template several times. It downloads to my (Mac) as a .zip file, and I when I unarchive it, do not see an .unbounce file inside. Unbounce is not allowing me to download the entire .zip file. What am I doing wrong?

J

Hey @Wahoo,

Give this link a try and let me know if it works for you.

J

Ahhhh, great question @Nicholas! This actually makes me think of all of the many Tips & Scripts we currently have… I wonder how many of them would work well on Convertables?

Curious to see if you’ve tried any @Nicholas!

Autopia

How can I add a new effect, for instance pulse? I know it says to add on line 41, but I’m not sure how.

M

Hey @Justin_Veenema running into the same issue as @Wahoo. The dropbox link leads to a page not found error, can I get a fresh link? Thanks!

V

The dropbox link leads to a page not found error, can I get a fresh link? Thanks!

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!

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.

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.

sam.gofast

Dustin ligeiro hahaha

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/

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?

Wesley_Rocha

I did the tests, but they are not working

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.

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

FelixACC

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

Reply


Terms & ConditionsCookie settings