Best practice for "caching" timeline values

[martis]

Hey guys,

 

I remember seeing a lot of posts where you could move the playhead to the end of a timeline then back to the start to "cache" the start values and such. What is the best method to do this again?

 

Thanks,

James

[Jonathan]

Hello martis, try this:

// create new timeline instance in a paused state
var element = document.getElementById('myElement');
var tl = new TimelineMax({paused:true});

// setup your animation 
tl.to(element, 2, {x:50});
tl.to(element, 2, {y:50});

// jump the virtual playhead to the end, then back to the start
tl.progress(1);
// cache variable at end state
var height = element.offsetHeight;
// jump the virtual playhead back to the start
tl.progress(0);

// .. due something with 'height' variable blah blah 

// play your animation sequence
tl.play();

Was this what you were looking for?

 

GSAP forum topic based on OSUblake answer for caching a variable in its end state: http://greensock.com/forums/topic/12241-get-end-value-of-classname-tween/?hl=never+happened#entry50589

 

Resource:

TimelineMax progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

TimelineLite progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/progress/

TimelineMax progress(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/progress/

TimelineLite progress(): http://greensock.com/docs/#/HTML5/GSAP/TweenLite/progress/

 

[martis]

Perhaps...

 

I think what I am really looking for was a way to avoid the performance hits when tweens in the timeline start.

 

Jack had an example where in one line of code he jumped to the end, then back to the beginning to achieve this.

[Jonathan]

Sorry i misunderstood your question since you were asking about caching a timleline , but the below should work based on Jacks previous answer in another Topic.

 

Is this what you meant:

// create new timeline instance in a paused state
var tl = new TimelineMax({paused:true});

// setup your animation 
tl.to("#box", 2, {x:50});
tl.to("#box", 2, {y:50});

// jump the virtual playhead to the end, then back to the start
tl.progress(1).progress(0);

// play your animation sequence
tl.play();

 

[Epiphany]

I know I'm reviving an ancient thread here, but I wondered if the progress trick was still considered best practice? As I still do this for all my timelines, where possible. The only time I don't is when a timeline has an onComplete callback, in which case it won't work because it'll fire the callback after caching.

 

The approach makes sense, but at the same time feels slightly hacky.

[OSUblake]

6 hours ago, Epiphany said:

I know I'm reviving an ancient thread here, but I wondered if the progress trick was still considered best practice? 

 

 

Where did you see that it was considered a best practice? It was shown as way to force all the calculations to be done upfront, which can help in situations where the start of an animation is causing a performance hit.

 

However, that does not mean that you should always use it, and it can work against you. For example, if you do the progress trick while other animations are playing, it can cause a performance hit because it's too much work for the browser to handle. Timing is important.

 

So it basically comes down to would you rather have all the work for your animations to be done upfront, or spread out over time? The progress trick isn't a trick. One way or another, the same amount of work has to be done, and you'll have to be the judge of what works best for your situation. 

 

 

6 hours ago, Epiphany said:

The only time I don't is when a timeline has an onComplete callback, in which case it won't work because it'll fire the callback after caching.

 

Check out the docs. There is a second parameter that will suppress those events from firing.

https://greensock.com/docs/TimelineMax/progress()

 

 

tl.progress(1, true).progress(0, true);