Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Adding elements to an existing timeline?

Recommended Posts

So this is probably pretty easy, but I can't see how to do it.

I've a timeline that animates a few boxes in, and then back out again. But I also want to be able to swap a box out for a new one. My question is - how do I get that new element to be included in the already existing animation?

I was hoping that calling `initTimeline()` would work in the swapElements() function, but that seems to retrigger the animation.

Basically to recreate what I'm getting at - click 'swap' and then 'leave' and you'll see the red box doesn't animate out 😔

See the Pen JjJgNmg?editors=1011 by nwoodward (@nwoodward) on CodePen

Link to comment
Share on other sites

Hi Nick,


It's easier to just recreate the timeline. So something like this. The box doesn't stay red because I'm clearing the props because you are using from tweens, but it's animating the new element.


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


  • Like 3
Link to comment
Share on other sites

Hi @OSUblake, sorry for the late reply - all hell broke lose this last week.

Appreciate the reply, that looks perfect (and on first glance will also help me structure my tls better)


Link to comment
Share on other sites

Hi @OSUblake - sorry to ask more questions, but I've been implementing this in slightly more complicated code (which I've a pen of but thought I'd spare you 😄), and I'm stuck on performing certain actions when the timeline is reversed

I think I've narrowed down my problem to misunderstanding when `onReverseComplete` is called. I've added it to the main timeline in the previous simpler example you fixed (below), I'm surprised it's running when the swap animation occurs - I assume that initialising the main timeline counts as reversing?

That would definition explain my headaches for the last day or so...! (but doesn't explain why I can't add it to the first animation of the tl 🤷‍♂️)

See the Pen dyzPxpM?editors=0011 by nwoodward (@nwoodward) on CodePen


Link to comment
Share on other sites

28 minutes ago, OSUblake said:

Setting the progress to 0 is causing it to fire, by you can prevent that by passing in true. 



tl.reversed(false).progress(0, true).clear();


Ah, supress events, nice - Thanks a lot!


I know it must look like I just didn't bother to read the docs, but applying the code to my site, and narrowing down the problem to the callback being fired at the wrong time by recreating the whole thing in another pen took an amount of time that I'm ashamed to admit yesterday and this morning...

...so it really is appreciated!

Link to comment
Share on other sites

No worries. Knowing that suppress events would work isn't obvious unless you've done a lot of work with GSAP.


  • Like 2
Link to comment
Share on other sites

+1 - I've been using GSAP for years and only learnt about it very recently ☺️

  • Like 2
Link to comment
Share on other sites

Yeah, it was definitely the time it took to narrow down the problem more than anything else!

You wouldn't want to have been anywhere near me as my divs were disappearing half way through an animation that was (in my opinion at the time) a completely separate tl 🤬

Sometimes I really don't think I have the patience for coding 😄

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.