Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
knalle

loop timeline progress - possible?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an infintie scrolling stack (actually its only 4 items looping) - and it's made up of a bunch of tweens, designed to seamless loop from progress 0-1, 0-1,0-1 and so on.

 

So if I use

tl = new TimelineMax({repeat:20});

It will play seamless.

 

Eventually I want to swipe the stack and it just rolls continuesly until it has lost momentum... (think mobile browser scrolling - where you flick your thumb and it scrolls ahead smoothly)

 

So I paused the timeline and test with a tweening.

For instance I want to move the stack 8 positions (that is moving twice through the stack of 4 items) - and since I timed each stack move with a second it would be:

 

TweenLite.to(tl, 1, {progress:8});

Naturally it wont tween progress beyond 1.

Naively I briefly thought:

TweenLite.to(tl, 1, {progress:8 % 1, ease:Expo.easeOut});

would work. But of course not - it isnt moving throught the stack twice

 

So my question is is there a way of looping progress?

I am thinking of doing the "progress modulu way" in an onUpdate. But I feel it isn't right tweening a vairable and using it in onUpdate - and won't it hurt performance?

 

or I could use

tl = new TimelineMax({repeat:20000});

and just tween the totalProgress or totalTime (if possible?)

 

But is there a better and more propper way?

 

TIA!

Link to post
Share on other sites

... so it could be:

var tl = new TimelineMax({repeat:200});

 

and to move through the timeline once:

TweenLite.to(tl, 1, {totalProgress:1/200, ease:Expo.easeOut});

and

4 times:

TweenLite.to(tl, 1, {totalProgress:4/200, ease:Expo.easeOut});

 

still... is there a better way? :|

Link to post
Share on other sites

Hi,

 

You could use the total progress method, which is between 0 and 1 but includes the repeats of the timeline, for example if you repeat your timeline 5 times, each time your timeline completes the progress would be 0.2, so in order to determinate where the playhead should be you just have to divide 1 by the total times your timeline repeats:

 

var repeats = 20,
tl1 = new TimelineMax({repeat:repeats}),
tl1ProgressUnit = 1 / repeats;

tl1.totalProgress(8 * tl1ProgressUnit);

 

In the code above the Timeline is repeating 20 times, and just like you said in your first post you want to advance it to the 8th repeat, so you multiply how many times you want your timeline to advance by the single progress unit that each repeat of the timeline represents.

 

Check the api reference

http://api.greensock...#totalProgress()

 

Hope this helps,

Rodrigo.

  • Like 1
Link to post
Share on other sites
  • 3 weeks later...

Hi,

 

You could use the total progress method, which is between 0 and 1 but includes the repeats of the timeline, for example if you repeat your timeline 5 times, each time your timeline completes the progress would be 0.2, so in order to determinate where the playhead should be you just have to divide 1 by the total times your timeline repeats:

 

var repeats = 20,
tl1 = new TimelineMax({repeat:repeats}),
tl1ProgressUnit = 1 / repeats;

tl1.totalProgress(8 * tl1ProgressUnit);

 

In the code above the Timeline is repeating 20 times, and just like you said in your first post you want to advance it to the 8th repeat, so you multiply how many times you want your timeline to advance by the single progress unit that each repeat of the timeline represents.

 

Check the api reference

http://api.greensock...#totalProgress()

 

Hope this helps,

Rodrigo.

 

There was one (now) obvious mistake we made... 5 repeats = 6 loops.

So it should be:

 

var repeats = 20,
tl1 = new TimelineMax({repeat:repeats}),
tl1ProgressUnit = 1 / (repeats+1);

tl1.totalProgress(8 * tl1ProgressUnit);

 

Probably a common mistake :)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×