Jump to content
Search Community

seek vs tweenTo in TimelineMax

smakinson test
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

  • 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

 

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

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.
×
×
  • Create New...