Skip to main content
joei37679332
joei37679332
New Participant
May 31, 2017
Answered

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

  • May 31, 2017
  • 2 replies
  • 9322 views

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!

This topic has been closed for replies.
Correct answer kglad

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

2 replies

C
ClayUUID
Brainiac
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();

    Orbit-Monkey
    Orbit-Monkey
    Inspiring
    February 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?

    Orbit-Monkey
    Orbit-Monkey
    Inspiring
    February 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();

      kglad
      kgladCorrect answer
      Adobe Expert
      May 31, 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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices