seek vs tweenTo in TimelineMax

[smakinson 0 Likes (Newbie)]

In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks!

See the Pen yyMeGX by anon (@anon) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and thanks for the demo.

 

Everything appears to be working fine. 

 

Please visit my updated pen: http://codepen.io/GreenSock/pen/LEWNgE?editors=101

 

The only changes I made were that I paused the timeline and added some instructions.

 

See what is happening if you wait 3 seconds? tweenTo() simply tweens the timeline's playhead forward to the time or label that you specify. Your tweens all have 3 seconds of "dead time" between them. So you just need to wait 3 seconds to see the next slide come in. make sense?

 

Also seek() jumps directly to the time or label you specify.

 

I think what you want to do is something like this

 

if(nextLabel){
//jump to 1 second before next label's transition and play
    timeline.tweenFromTo(timeline.getLabelTime(nextLabel) - 1, nextLabel);
  }else{
    timeline.play(0);
}

see here: http://codepen.io/GreenSock/pen/gbmrQW?editors=001

 

oh, and also note that i changed your transform: 'translate(' + index * prevWidth  + 'px)' code to

 

TweenMax.set(this, { 
    x:index * prevWidth
  });

which does the same thing

[smakinson 0 Likes (Newbie)]

Thats it, ya looks like I had "tuned out" my own delays in my head   I appreciate the reply.

 

Also are you saying that just setting x will internally still use css transforms? I want to be sure to maintain use hardware acceleration for the box I am using this on?

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Yep, since version 1.15.0, when using CSS transforms, the CSS Plugin uses a 3D matrix forcing the creation of a GPU layer for better performance.

 

Check the first two paragraphs here:

 

https://github.com/greensock/GreenSock-JS/commit/04774cbb6bf3c255dcd388ec530f448025a45df5

 

Rodrigo.

[smakinson 0 Likes (Newbie)]

Awesome! So to be 100% clear, if I include CSSPlugin.js it will do this and if I don''t it falls back to the old way?

[Carl 9,066 Likes (Superhero)]

CSSPlugin is loaded inside of TweenMax (which is what we recommend you load most of the time).

 

You would only need to load CSSPlugin separately if you want to be super careful about filesize and don't need a lot of features... in that case you might load TweenLite, CSSPlugin and EasePack only.

 

 

If CSSPlugin is not present that tween will not work at all, GSAP can not modify CSS properties of DOM elements without the CSSPlugin.

 

GSAP will automatically detect if you are tweening CSS properties, and if so it will seamlessly pass those values off to CSSPlugin.

CSSPlugin will intelligently detect if the properties you are tweening can be hardware accelerated AND if the browser supports that and act accordingly.