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

    G
    gal_op
    New Participant
    June 6, 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?

    C
    ClayUUID
    Brainiac
    June 6, 2017

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

    kglad
    kgladCorrect answer
    Community 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