Jump to content
GreenSock

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

seek vs tweenTo in TimelineMax

Go to solution Solved by Carl,

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

  • Like 3
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.

×