Jump to content
Search Community

Multiple timelines in sequence

Kire test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi fellows,

 

I want to control three timelines with three different buttons. I got the easy part done but now i want to be able to;

 

  1. Start the next timeline after the active/playing timeline is fully reversed, or even better, with controlled overlap.
  2. Play the reverse part of the timeline in another timeScale without messing with the forward playing timeScale.

 

I know my syntax is pretty stoneage, but that is just the level im at. So either I am hoping there are some basic GSAP commands that i can use in sequence since i dont need to have a clean scaleble code

OR

if someone can point me in the right direction for a smarter solution so i can be efficient in my learning.

 

Thanks in advance

See the Pen rNmVjKg by Keri_s (@Keri_s) on CodePen

Link to comment
Share on other sites

Hi Kire!

 

You can change the timeScale like so.

tl2.reverse().timeScale(2);
tl1.play().timeScale(1);

 

Another interesting thing you can do is tween the properties of an animation, like it's progress.

 

let tl = gsap.timeline({ paused: true })

...

gsap.to(tl, {
  progress: 1
});

 

So maybe we do something like this. We just need some logic to keep track of what is currently active and what to play next.

 

See the Pen zYwvxyo by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Hi OSUblake!

 

Wow, thank you for quick respons and great result!

This really made my day, you are truly a superhero 😃 

 

Now i have some interesting reverse-engineering-code-learning to do, it will raise my bar for sure.

 

Best regards

  • Like 2
Link to comment
Share on other sites

Hi again, 

 

I found a glitch that i cant figure out.

20 hours ago, OSUblake said:

So maybe we do something like this. We just need some logic to keep track of what is currently active and what to play next.

If one of the timelines has played, and i fire away the other two fast - they both start to animate.

 

I tried to sequence by just tweening the timeline progress as mentioned, but then i have to wait for the duration to end on the animation that is already inactive, and i had other problems like the tween not "sticking" to progress:0 . 

 

I think for sure that i have been given the basics of a solution but i cant make the final code since it to advanced for me. I guess i was looking a for a easy to use control of timeline that is not possible 😌 It would be golden if something like this was appicable with GSAP;

 

function somefunction(){

t2.reverse({timeScale:2, waitForComplete});

t3.reverse({timeScale:2, waitForComplete});

t1.play();

}

 

Best regards

Link to comment
Share on other sites

  • Solution
3 hours ago, Kire said:

It would be golden if something like this was appicable with GSAP;

 

function somefunction(){

t2.reverse({timeScale:2, waitForComplete});

t3.reverse({timeScale:2, waitForComplete});

t1.play();

}

 

Well, there kind of is. GSAP can be used with promises, but getting into the details of how async and await work is beyond the scope of this forum. 

 

async function animate1() {

  await Promise.all([
    t2.timeScale(2).reverse(),
    t3.timeScale(2).reverse()
  ]);
  
  t1.timeScale(1).play();
}

 

See the Pen ZEKbvbZ by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, OSUblake said:

 


async function animate1() {

  await Promise.all([
    t2.timeScale(2).reverse(),
    t3.timeScale(2).reverse()
  ]);
  
  t1.timeScale(1).play();
}

 

 

That's an awesome pro-tip. I can't believe I didn't think of that solution earlier. 🤦‍♂️

 

  • Like 3
Link to comment
Share on other sites

15 hours ago, OSUblake said:

That's an awesome pro-tip. I can't believe I didn't think of that solution earlier. 🤦‍♂️

 

Well sir, i am very glad that you thought of it now 😀 I am a really happy tweener today!

 

Thank you!

  • Like 2
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...