Jump to content
Search Community

timelinemax, timeScale and it's x position

Oscar Rottink test
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

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

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

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