CODEWITHSUNDEEP
javascriptjquerygsap
Patrick
Patrick

Reputation: 820

Restart greensock (JS) animation when window width reaches 865px

I am working with js greensock animation library. I have an animation that pauses when you start to resize the window and continues when you stop resizing the window.

I am now attempting to make the animation (Start over) or from a (certain point) if the window width passes 865px in either direction.

The current code im working with works "Okay" it refreshes the entire page upon reaching 865px in either direction. However, instead of reloading entire page I would just simply like to "restart" the animation.

Here is a working CODEPEN

And here is the snippet of JS that I am working with and referring to.

//Reload Animation if window width crosses over 865px either way.

var ww = $(window).width();
var limit = 865;

function refresh() {
   ww = $(window).width();
   var w =  ww<limit ? (location.reload(true)) :  ( ww>limit ? (location.reload(true)) : ww=limit );
}

var tOut;
$(window).resize(function() {
    var resW = $(window).width();
    clearTimeout(tOut);
    if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {        
        tOut = setTimeout(refresh, 0);
    }
});

Thanks!

Upvotes: 0

Views: 1261

Answers (2)

GibboK
GibboK

Reputation: 73918

You can call .restart() which restarts and begins playing forward from the beginning when using TweenMax or TweenLite.

API infos here: https://greensock.com/docs/TweenMax/restart()

Upvotes: 0

Ivan Modric
Ivan Modric

Reputation: 619

There is no need to refresh the whole page. There are several ways to manipulate a Tween or Timeline.

If you want to play it from the beginning the easiest way would be: myTimeline.restart()


Alternatively you could change the progress and play the animation from that point: myTimeline.progress( myProgress )

The placeholder myProgress can be 0 marking the start and 1 being the end of the Tween (or any number inbetween). So the code to play it from the start would look something like this:

myTimeline.progress( 0 ).play()


A third way would be .play( time )

This is similar to .progress() with the difference that myProgress is a relative measurement and time is an absolute one. So if the duration of myTimeline is 8 seconds myTimeline.progress(0.5).play() would have the same result as myTimeline.play(4)

EDIT:

Here is a fork of your Pen. I believe it does what you are looking for: http://codepen.io/anon/pen/adqypP

Upvotes: 3

Related Questions