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

    R
    rosebudd10027515
    Inspiring
    February 12, 2018

    ClayUUID

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

    M
    MIBE3173299
    Participating Frequently
    April 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.

    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