Removing Elements after Animation is Completed

[Sam A]

Hello this is my first ever post and question.

I have been doing Carl Schoff course on GSAP and loving it.

I have been messing around with a reveal animation.

I have dynamically added some divs to the DOM and added them in a div using the innerHTML property.

Once the animations are finished I would like the divs to be removed from my div with the class name sliders.
I created my first codePen from the GreenSock how to.

Also if there is a better way to create what I have already I am open to any suggestions.
I know I could create a timeline and then chain the to methods.

Thank you in advance for any help.

See the Pen ExpyNLB by SneakCoder (@SneakCoder) on CodePen

[GreenSock]

Congratulations on your first post here, @Sam A! And thanks for being a Club GreenSock member. 💚🥳

 

@Carl's courses are great, aren't they? 

 

There are many ways you could accomplish this. Here's one: 

See the Pen qByNqvO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just create a timeline with an onComplete that sets the innerHTML to "" (empty). That effectively eliminates all those <div> elements you added. 

 

You don't need to have a separate tween for ".odd" and ".even" either - you  can just use a function-based value with conditional logic based on the index of the targets, as illustrated in my demo. I'm not sure if you intended this, but you created a very different animation where the staggering of the ".even" ones was 0.3 and the ".odd" ones were 0.2, thus the timing would drift further and further apart. For example, if there were 100 odd and 100 even, the LAST odd one would start after 20 seconds whereas the last even one would start after 30 seconds. So a full 10 seconds would elapse between those. 

 

I figured you meant for the odd and even ones to stagger consistently, so I did that in my fork of your demo. 

 

I hope that helps. Enjoy!

[GreenSock]

By the way,  if you wanted to remove each <div> the moment it completed its individual animation, you could do so like this: 

See the Pen BaPzQEJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But I think that looks pretty weird. I wasn't really sure what effect you were after. 

[Sam A]

Thank you @GreenSock  for replying and your 2 examples. I agree the second version is not what I was aiming for. I also know I could use an object for the stagger property. I was just trying to get the main parts working first before I refined the code 🙂. Your 1st solution for remove the divs is the one I will go with. Thank you for remindering me that I can add more than one target for the first parameter.

 

Yes @Carl's courses are amazing! Thank you Carl, I'm working on the ScrollTrigger Express course now after completing GSAP 3 Express and only now trying to get in some solo practice from that course.

[Carl]

Hi @Sam A

 

So nice to hear you are enjoying the courses! Great job coming into the forums with a clear demo. Glad to see you got the best help in the world from @GreenSock 

 

Happy New Year!

[GreenSock]

By the way, @Sam A, here's another way you could simplify things:

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

 

A simple gsap.set() for the even/odd class name assignments, and a tween for everything else (no need for a timeline since there's only one tween going into it anyway). 

[Sam A]

Hi @GreenSock , sorry it's been several days and I've only just been able to get back to this. Thank you for the additional example.
I do have one question for you and that is, is the property onComplete an official GSAP property? If so where can I find the docs on it. I have searched with no success.

 

Thank you for your time.

 

[Carl]

Please see the "Special Properties" section

 

https://greensock.com/docs/v3/GSAP/Tween

 

Timelines have similar callbacks too.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

This video is part of my courses but it's also on YouTube. 

 

 

[Sam A]

Thank you @Carl. I should have done that course after GSAP 3 Express 🙂