How to pause animation until it's visible in the browser

Report · May 30, 2017

So I've created an animation, published it, and it loads up great - looks and works great.

However - it starts below the fold (off screen) when the page it's on loads - so you don't get to see the animation, unless you scroll down to where it is, and reload the page.

I'm using the Avada wordpress theme (latest version) - and I'm hoping there's some way to tell the animation to wait to start until it's visible in the browser.

any help or suggestions would be greatly appreciated!

Report · May 30, 2017

i don't know of any ready-to-use solution but you can use a scroll listener to call something that checks if your stage is in the viewport:

javascript - Canvas: Detect if it is visible in browser - Stack Overflow

Report · May 31, 2017

Paste this into your first frame:

// stop main timeline

this.stop();

// check timeout handle

var chkTimer;

// only check visibility when scrolling has stopped

function scheduleVisCheck() {

clearTimeout(chkTimer);

chkTimer = setTimeout(checkCanvasVis, 250);

}

// play main timeline when canvas has scrolled (vertically) into view

function checkCanvasVis() {

var rect = canvas.getBoundingClientRect();

if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {

window.removeEventListener("scroll", scheduleVisCheck);

exportRoot.play();

}

// hook event listener to window scrolling

window.addEventListener("scroll", scheduleVisCheck);

// just in case canvas starts already visible

checkCanvasVis();

Report · Jun 05, 2017

@ClayUUID

This solutions is the best I have seen so far. It is however only works on Firefox.
Any suggetions on how to imporve this code to work on all browsers?

Report · Jun 06, 2017

I just tested it in desktop Firefox, Chrome, and Internet Explorer, and it worked in all three.

Report · Jun 06, 2017

This doesn't seem to have any effect for me. I've added it to the first frame, and it does nothing.

and just to be clear, I'm embeding the html5 code to the page - so if I refresh the page with the animation in view, you see the animation. However, if I start at the top, and scroll down to where it is, it has already played.

is there some specific way that I should be embedding the code that will make this work? I'm guessing it's something I'm doing.

Here's the code I have on the page:

</div>

</body>

and of course the rest of the code is in the <head> tag area.

any suggestions?

Report · Jun 06, 2017

joei37679332 wrote
This doesn't seem to have any effect for me. I've added it to the first frame, and it does nothing.
...
and of course the rest of the code is in the <head> tag area.

Okayyy... the very first line of the code I provided is this.stop(); That means that even if nothing else is working, the movie should not be playing.

What have you done?

Report · Feb 12, 2018

Thanks - that script worked for me. However, can it be modified to restart the animation when it comes back into view? For example... You scroll down the page and animation comes into view and starts playing. You keep scrolling past the animation (animation goes out of view) Then scrolling back up the animation would reset at start again when visible...so basically anytime it comes into the view port it starts from the beginning?

Report · Feb 12, 2018

Yes, that is a modification that you could make to the code.

Report · Feb 12, 2018

ClayUUID - Hehe - well - I wish I could but I don't know the scripting language. Is that something you could help with?

Report · Feb 12, 2018

Sorry, I don't often have time to be writing custom code for people. Anyone who works with Animate Canvas documents really needs to know JavaScript.

Report · Feb 20, 2018

In case anyone else needs it - here is the code above modified to make the animation restart every time the animation comes into view.

// stop main timeline

this.stop();

// check timeout handle

var chkTimer;

var inview = false;

// only check visibility when scrolling has stopped

function scheduleVisCheck() {

clearTimeout(chkTimer);

chkTimer = setTimeout(checkCanvasVis, 250);

}

// play main timeline when canvas has scrolled (vertically) into view

function checkCanvasVis() {

var rect = canvas.getBoundingClientRect();

if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) -150 || (rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.bottom > 150) ) {

if (inview == false) exportRoot.play(0);

inview = true;

} else {

inview = false;

}

// hook event listener to window scrolling

window.addEventListener("scroll", scheduleVisCheck);

// just in case canvas starts already visible

checkCanvasVis();

Report · Apr 07, 2018

Hello,

Thanks for your code

I did work fine in Safari but sadly not in chrome

I use Iframe to insert animate HTML5 in Avada thème for wordpress

Any clue ?

Thks a lot in advance

Report · Apr 09, 2018

Unfortunately this code doesn't work with iframe embedding. You need to embed using the html code Animate generates when you publish the animation.

Report · Apr 09, 2018

Hello Orbit Monkey,

Thanks for your answer,

i have multiple different animate canvas on the same page, and i didn't find a way to integrate those on the same wordpress page without an iFrame

(Too much conflict)

If you have an easy way for WP, i think this would be so useful for animate users

Report · Apr 09, 2018

I have put several animations on one wordpress page using the Animate generated code... and it's not easy... lots of Find & replace changing all the JavaScript variable names. Here is an example (not in WordPress - but its the same code): ladybug1

I hope to do a video of how to do it soon...

Report · May 14, 2020

This is gold and is the most elegant solution for us JS impaired (creative) folks!!! Thank you so much ClayUUID and Orbit-Monkey!!!

Report · Feb 12, 2018

ClayUUID

Do you know if iframes know whether they are visible. It seems like they would have no way of knowing.

Report · Apr 30, 2020

Hello,

i know this is an old post, but i think it's interesting for better user experience. I made animations for my site web. They are made with adobe animate CC. There can be several of them on one page. Web site is responsive.

My hopes and dreams are to figure out to :

• Load the page with the animations played entierely only when the bottom is on screen (in viewport) = when scrolled over.

• If the animations are on the loaded viewport, if there are several in same div, play first then play second only when first is complete then play third only when first and second are complete, etc. (when scrolled further and back play again)
• If the scroll go further on the page and come back and if the animation isn't finished, it starts again, if the animation is still playing, it doesn't loop at the begining.

• Play the animation on hover unless it's allready playing

I red a lot of threads and different methods on adobe community stackoverflow github etc. but it led to a dead-end. I think this issus can be of some help for most of us. I tried your way but it didn't work very well.

So i made a TEST project https://agence-mibe.com/TESTSCROLLANIM/ with only one animation. The modified Adobe Animate published HTML doc is here : https://agence-mibe.com/TESTSCROLLANIM/LOGO_anime-/Assets/LOGO_anime-.html .

I used the IsInView javascript https://github.com/zeusdeux/isInViewport .

As you can see :

• Animation is played when scrolled over BUT at the top of it. I think i will be able to make it work with the bottom there is a topic with "tolerance" attribut but i haven't understood it very weel yet.

• Animation is played on over with a body onmouseover="init()" / init()" is the adobe animate but it loops when hover if it's still playing

That what works with ONE animation per page.

On my website with many animations per page the scroll function doesn't work. I changed the div ID to avoid conflict but it failed.

So if somebody is still interest i would be glad to continue this topic .

All kind of ideas are welcome !

Frédéric.

How to pause animation until it's visible in the browser

1 Correct answer

Photos