Jump to content
Search Community

Best way to chain timelines on button click

Stefano Monteiro test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hey,

 

Brand new here, I am trying to figure out the best way to chain these two timelines on the button click. `text` should play after `background` is completed.

 

 

Special thanks to Carl, going through the course and trying to learn my way into GSAP.

See the Pen vYgRxxY?editors=0011 by stefanomonteiro (@stefanomonteiro) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi Stefano,

 

Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo.

 

There are a few ways to do this but I will start with a fairly basic approach to see if that works for you.

 

To chain these 2 timelines together you can add them both to another timeline, often called a master or parent.

 

GSAP 3 Beyond the Basics has some lessons on this.

 

See the Pen abpaPEJ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

notice your child timelines are no longer paused and they are added to master. your button now controls master

  • Like 6
Link to comment
Share on other sites

That's awesome Carl.

 

I am just about starting the Beyond The Basic videos.

 

Now, on the case above. Let's say I want the exit animation to be slight different. I am thinking of:

 

Creating another `text` timeline, let's call it `textExit` and another `master` (`masterExit`). And invoke this `masterExit.play()` on the exit (closing animation - when `openned` class exists). 

 

Is there a better, cleaner solution for this?

Link to comment
Share on other sites

that opens the door to a whole bunch of logic issues such as what do you do if some tries to close the panels while they are still opening? In last week's video in B-sides, Bonuses, and Oddities I go over the perils of using 2 timelines for distinct enter and leave animations. See below

 

 

although this lesson focuses on a simple "rollover" effect the same concepts can be applied to your click-driven animation.

 

other approaches involve creating animations on demand (by calling functions which create those animations) but there are some pros and cons that I don't have time to get into at the moment. Perhaps a future lesson. Hopefully this video gives you something to work with.

 

 

  • Like 4
Link to comment
Share on other sites

Carl,

 

The video was perfect. I had seen it on my youtube feed on Saturday, but hadn't had a change to watch it yet. Perfect timing ;)

 

The animation is working, but I have two questions.

 

1 - I run a different condition on click, instead of checking class I now added if(!menuAnimation.progress() || menuAnimation.progress() == 1). Any better condition comes to mind to check if the animation should restart?

 

2 - At first I tried to use the chain timelines, with a master one.  Because the background timeline is the same but inverted I tried something like this:

// Add timelines to Master
master.add(background).add(textIn).addPause();
menuOpened = master.duration();
master.add(textOut).add(background.reverse());

It didn't work, but is there any way to replace the .add(background.reverse()) and use the same timeline (background) twice, being the second time reversed?

 

I ended up saving the codepen, so you can see the final code above. The master code (chained timelines) is commented out.

 

Thanks a lot for the help. 

 

 

Link to comment
Share on other sites

regarding the condition you are using I'm not sure when !menuAnimation.progress() is true or what you are using it for. perhaps isActive() will help.

 

a timeline can only be added to another timeline once. A solution to this is you can use tweenTo() to have multiple animations that scrub through the timeline as shown in this video
 

 

  • Like 2
Link to comment
Share on other sites

Different than your video where you have mouseenter and mouseleave I only have click. The same eventListener is for starting the animation and to play the second half (after the pause). So, I am passing a condition to see if the progression is zero or one (!menuAnimation.progress() || menuAnimation.progress() == 1) to .restart() it, meaning if it is not either, the animation should .play()

 

 

The .isActive() did not work, it restarts the animation. Even thought the doc says it should return false for paused state.

 

As for the second part, thanks for the video. I managed to add the background timeline in reverse at the end, but having an issue with the first background animation.  I tried two different things:

1 - The animation breaks when running for the second time

master
  .add(background)
  .add(textIn)
  .addPause();
menuOpened = master.duration();
master
  .add(textOut)
  .add(background.tweenFromTo(background.duration(), 0));

 

2 - The background animation starts on page load, not on button click.

master
  .add(background.tweenFromTo(0, background.duration()))
  .add(textIn)
  .addPause();
menuOpened = master.duration();
master
  .add(textOut)
  .add(background.tweenFromTo(background.duration(), 0));
Link to comment
Share on other sites

please see line 105 I changed it 

from

.add(background) 

to

.add(background.tweenTo(background.duration()))

 

See the Pen KKaGBYG?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I'm pretty sure when you replay the timeline it didn't know that you had messed with the playhead of background with that tweenFromTo() at the end.

Short story: if you are going to use tweenTo() and tweenFromTo() don't also add the timeline as a child.

 

*edit: be sure to pause the background timeline also

 

  • Like 3
Link to comment
Share on other sites

background() is a function that creates and returns a new timeline each time it is called

 

when you build your timeline you are calling background() FOUR times with this code

 

master
  .add(background().tweenTo(background().duration()))
  .addPause();
menuOpened = master.duration();
master
 .add(background().tweenFromTo(background().duration(), 0));

 

please add

 

console.log("create a new timeline")

 

to your background() function as a test. You'll see it fires 4 times.

 

I would not recommend mixing these two-method (functions that return a timeline and tweenFromTo())

 

The purpose of using tweenFromTo() is so that you can control the playhead of a SINGLE timeline that is created once.

 

The purpose of functions that create timelines is so that you can create similar animations MULTIPLE times (or just keep your timeline creation code separate).

 

hopefully this helps.

 

It's great that you found that old video, but please go through GSAP 3 Beyond the Basics. It has lessons on functions that create timelines and it uses the new GSAP 3 syntax :) Check out the "flatten the curve" banner exercise.

 

 

 

Link to comment
Share on other sites

  • 1 year later...

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