Jump to content


seek vs tweenTo in TimelineMax

Moderator Tag
Go to solution Solved by Carl,

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

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 comment
Share on other sites

  • Solution

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


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

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 comment
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 comment
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 comment
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 comment
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.