timelinemax, timeScale and it's x position

[Oscar Rottink 14 Likes (Newbie)]

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.

[Diaco 1,997 Likes (Superhero)]

Hi OzBoz 

 

pls make a codepen demo available to find your problem , Read This First: How to Create a CodePen Demo

 

anyway , i made a codepen for you , and cant find what you mean ! 

 

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

[Oscar Rottink 14 Likes (Newbie)]

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 October 30, 2014 by OzBoz

[Diaco 1,997 Likes (Superhero)]

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

[Oscar Rottink 14 Likes (Newbie)]

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 ) {
    trainOne.play(0);
  } else if ( trainOne.reversed() == true ) {
    trainOne.reverse(trainOne.totalTime());
  }
}

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

 

[Diaco 1,997 Likes (Superhero)]

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

 

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

[Oscar Rottink 14 Likes (Newbie)]

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.

[Oscar Rottink 14 Likes (Newbie)]

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