TimelineMax animation kill / restart on scroll

[idesigner]

Have a dev installation using a simple timelineMax animation set to an infinite loop as requested by client

 

Is there a way to kill/stop the animation once it leaves the viewport and then restart, from the beginning, when it re-enters the viewport?

 

Here's the animation:

 

var tl = new TimelineMax({delay:1,repeat:-1,repeatDelay:0.25});

 tl.from(".marketHeading", 1, {scale:0, autoAlpha:0})

 .from(".strategicOptions", 1, {scale:0, autoAlpha:0}, "-=0.2")

 .from(".addedValue", 1, {scale:0, autoAlpha:0}, "-=0.2")

 .from(".demonstrateValue", 1, {scale:0, autoAlpha:0}, "-=0.2")

 .from(".strengthenTeam", 1, {scale:0, autoAlpha:0}, "-=0.2")

 .from(".implementBetter", 1, {scale:0, autoAlpha:0}, "-=0.2")

 .to(".section-wrapper", 0.75, {opacity:0});

 

 tl.timeScale(1);

 

Can provide url if necessary

[Jonathan]

Hello  idesigner, and welcome to the GreenSock forum!

 

Here is an example of using the HML5 Visibility API to keep track of browser tab focus and blur .. along with checking for browser window focus and blur events:

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

You basically would put your timeline pause and resume calls inside the event handlers. You will pause() the animation when the browser tab and window lose focus and then when the regain focus .. you will restart() your animation.

• pause() :  http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/
• restart() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/restart/
• kill() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/kill/

To check if the current active tab has focus or not, using the HTML5 Visibility API.

:

// main visibility API function 
// use visibility API to check if current tab is active or not
var vis = (function(){
    var stateKey, 
        eventKey, 
        keys = {
                hidden: "visibilitychange",
                webkitHidden: "webkitvisibilitychange",
                mozHidden: "mozvisibilitychange",
                msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

:

Use the HTML5 Visibility API like this:

:

// check if current tab is active or not
vis(function(){
					
    if(vis()){
	
        // tween restart() code goes here	
	setTimeout(function(){            
            console.log("tab is visible - has focus");
        },300);		
												
    } else {
	
        // tween pause() code goes here
        console.log("tab is invisible - has blur");		 
    }
});

:

You will still need the following to check if other windows have focus or not (blur). Chromium type browser like Google Chrome or Latest Opera do not fire all the time when binding the event with jQuery window, so you need to check for window.addEventListener.

:

// check if browser window has focus		
var notIE = (document.documentMode === undefined),
    isChromium = window.chrome;
      
if (notIE && !isChromium) {

    // checks for Firefox and other  NON IE Chrome versions
    $(window).on("focusin", function () { 

        // tween resume() code goes here
        setTimeout(function(){            
            console.log("focus");
        },300);

    }).on("focusout", function () {

        // tween pause() code goes here
        console.log("blur");

    });

} else {
    
    // checks for IE and Chromium versions
    if (window.addEventListener) {

        // bind focus event
        window.addEventListener("focus", function (event) {

            // tween restart() code goes here
            setTimeout(function(){                 
                 console.log("focus");
            },300);

        }, false);

        // bind blur event
        window.addEventListener("blur", function (event) {

            // tween pause() code goes here
             console.log("blur");

        }, false);

    } else {

        // bind focus event
        window.attachEvent("focus", function (event) {

            // tween restart() code goes here
            setTimeout(function(){                 
                 console.log("focus");
            },300);

        });

        // bind focus event
        window.attachEvent("blur", function (event) {

            // tween pause() code goes here
            console.log("blur");

        });
    }
}

:

You will also notice that i have a setTimeout() in the focus event handler so the tab/window has enough time to gain focus, and so the focus event handler fire consistently. I noticed Firefox and Google Chrome were not resuming correctly unless i added the setTimeout().

 

The reason i use the HTML5 Visibility API is because some browsers like Chrome wont trigger the tab blur unless you actually click inside the other new tab, simply scrolling with the mouse wont trigger the event.

 

I hope this helps!

[Carl]

Hi and welcome to the GreenSock forums,

 

Not sure what you are asking, but if you need to pause and restart your timeline you can do it easily with

 

tl.pause() and tl.restart()

 

Are you asking how to detect when the items you are animating scroll out of view?

 

I think Jonathan interpreted this as how to control your animation when the browser tab loses focus (which is a valuable technique).

[idesigner]

Thank you both - think it is probably a tl.pause() tl.restart()

 

Essentially it's a single page Drupal 7 Bootstrap3 site where once a visitor has scrolled below the opening section containing the animation the animation continues in the 'background' i.e. is infinite.

 

However when a visitor returns to the page top, the animation could be at any point in the sequence - client has requested that it should effectively restart from the beginning in such an instance

 

Would the url be of help in this?

[idesigner]

url is pm2015.jamfactorydesign.co.uk

[Diaco]

Hi idesigner 

 

please take a look at these plugins , i think this's what you need :

 

http://janpaepke.github.io/ScrollMagic/

 

or

 

http://johnpolacek.github.io/scrollorama/

[Carl]

jQuery waypoints might be all you need here: https://github.com/imakewebthings/waypoints