Jump to content

Oscar Rottink

timelinemax, timeScale and it's x position

Moderator Tag

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

I got a small timeline like this:

TweenMax.set($("#train2"), {x: -210});
var trainOne = new TimelineMax({repeat:-1});
trainOne.add( TweenMax.to($("#train2"), trainOneSpd, {x: scrWidth, ease:Linear.easeNone}));

When I dial a button with draggable the timeScale will change like this:

trainOne.timeScale( trainDeg / 100 );

That works and the values I get from the timeScale vary between 0.1 and 1.


The weird thing is that although the animation runs fine while not touching the dial after I select a speed it doesn't run the entire screen anymore. It's like a different x-value is targeted instead of scrWidth.


Just not sure what is happening here. Hope someone has some things I could try.

Link to comment
Share on other sites

Hey Diaco.AW,


Thanks for your reply. I never created a codepen but for all the first time. But well... it works! I had something really wrong in my normal code causing another tween to reset the timeline. Aarccch. But works very sweet that codepen so thanks!


If you are curious: 

See the Pen duBFp by OzBoz (@OzBoz) on CodePen


I'm no coder (more gfx guy) so don't kill me. If you want, maybe you can do a suggestion to get the values just on a mousedown and not only on release. I like to puzzle with code though, in the end I figure it out. Thanks again!


A question, if it is played it will go ahead to the right. And if I turn the knob the other way it will go to the left. But it will not appear again on the right side. I think I can use two timelines but not sure if that is needed.

Edited by OzBoz
Link to comment
Share on other sites

Hi again


nice job :)

but since timeScale with negative value act like reverse play ;  i changed your Codepen a bit , pls check this out :


See the Pen JlbmE by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Thanks! But I wanted to get the train starting on the right if you are in reverse. And what I was trying was this:

function trainOneEnd() {
  if ( trainOne.reversed() == false ) {
  } else if ( trainOne.reversed() == true ) {

I trashed the repeat: -1. Not sure if that's the way to go but that function will get called at onComplete and at onReverseComplete. It does work like a charm, maybe there are smarter ways :)


I also edited my codepen: 

See the Pen duBFp by OzBoz (@OzBoz) on CodePen


Link to comment
Share on other sites

Ok ...that solved already , pls check the codepen again :


See the Pen JlbmE by MAW (@MAW) on CodePen

Link to comment
Share on other sites

That looks much nicer. I will try to implement that code. For now I was trying to solve something different. I got two knobs. #knob1 and knob2 actually. So I'm trying to extract that number (not that hard) and use it to control the right timeline. Like trainAnim1.play. Definitely my (lack of) code skills but I think with that seperate control function you made (using get) I must get it done since you connect a ID seperately with a function.


Thanks again! I'll let you know if it works.

Link to comment
Share on other sites

So I worked at it again.. seemed that eval() did the trick. There is a bug if you go in reverse and the trains get not reset properly but getting there. Updated version at 

See the Pen duBFp by OzBoz (@OzBoz) on CodePen



edit: fixed that bug (I think).

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.