Highlighted

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

New Here ,
May 30, 2017

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

Views

3.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
May 30, 2017

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

Views

3.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 30, 2017 0
Adobe Community Professional ,
May 30, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 30, 2017 0
Adobe Community Professional ,
May 31, 2017

Copy link to clipboard

Copied

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();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2017 2
New Here ,
Jun 05, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 05, 2017 0
Adobe Community Professional ,
Jun 06, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2017 0
New Here ,
Jun 06, 2017

Copy link to clipboard

Copied

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:

<body onload="init();" style="margin:0px;">

  <div id="animation_container" style="background-color:rgba(255, 255, 255, 0); width:1600px; height:200px">

  <canvas id="canvas" width="1600" height="200" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0);"></canvas>

  <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1600px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">

  </div>

  </div>

</body>

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

any suggestions? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2017 0
Adobe Community Professional ,
Jun 06, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2017 0
Explorer ,
Feb 12, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
Adobe Community Professional ,
Feb 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
Explorer ,
Feb 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
Adobe Community Professional ,
Feb 12, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
Explorer ,
Feb 20, 2018

Copy link to clipboard

Copied

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();

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2018 1
Community Beginner ,
Apr 07, 2018

Copy link to clipboard

Copied

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

<iframe width="100%" height="420" src="http://mydomain.com"></iframe>

Any clue ?

Thks a lot in advance

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 07, 2018 0
Explorer ,
Apr 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
Community Beginner ,
Apr 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
Explorer ,
Apr 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
New Here ,
May 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2020 0
Enthusiast ,
Feb 12, 2018

Copy link to clipboard

Copied

ClayUUID

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
New Here ,
Apr 30, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 30, 2020 0