Creating and Removing Elements During Animation

[GaryD]

This is my first post in these forums, so I'd like to start off by saying thanks.  I've been using GreenSock for a month now, and have been impressed with the API and documentation.  It's really been a pleasure to work with.

 

My question is about whether there are any recommendations or best practices around creating, removing, or rearranging elements in the DOM... during animations.  For simple animations, I suspect it is easiest to make such changes before or after the animation is done, and to just hide them in some way while animating.  Maybe my situation is not very common, but my animations are being driven programmatically and the types and numbers of such changes is variable and seems quite cumbersome to manage.  So I am wondering whether others are dealing with this kind of problem, and how.

 

The technique that I have stumbled onto involves using timeline.call() to set callbacks that toggle these changes to be made or un-made every time they are triggered/called.  These callbacks also also keep track of the objects being created or destroyed, to allow them to persist along with any animations applied them.  This allows the user to see the correct thing when they restart or scrub backwards through the timeline.  I have some utility methods to help create these callbacks with a few variations whenever they are needed (and also to make other undoable changes to the rest of my application's state).  Does this sound like what others are doing?  Or are there other ways that people are tackling this kind of problem?  Or maybe it's just not a very common problem(?).

 

[ZachSaucier]

Hello Gary and welcome to the forums! So glad to hear that you're enjoying GSAP.

 

I'm not quite understanding what you're attempting to do. I think a demo of your technique would be helpful for us to understand and give feedback. See the below post for more information on how to create a minimal demo that we can see: 

 

 

[GaryD]

Thanks for this suggestion Zach.  Over the weekend, I spent a bit of time trying to put together a simple version of what I am describing... but even these simple examples became quite complicated.  This is leading me to believe that the need for this kind of "pattern" is probably not as common as I had originally thought.  In all of the simpler examples that I was able to come up with, simply hiding objects to simulate their being destroyed or not yet created was sufficient.  Or maybe there is some complexity in my own problem that is preventing me from seeing that it could also be solved in this simpler way (?).

 

Sorry I was not able to describe this situation more clearly, or come up with a truly simple example to share.  I'll stick with my current solution to what no longer seems like a pattern that others are likely to have differently organized solutions for solving.

[ZachSaucier]

Fair enough. If you get done with the project and want to share I'm sure several of us are curious what it is and would love to see!

[OSUblake]

6 hours ago, GaryD said:

Over the weekend, I spent a bit of time trying to put together a simple version of what I am describing... but even these simple examples became quite complicated.  This is leading me to believe that the need for this kind of "pattern" is probably not as common as I had originally thought. 

 

It's probably more common than you think. Everything you described sounds pretty normal to me.

 

If things get too unwieldy for you, you may want to consider using a framework like React, Vue, Angular, etc. Frameworks simplify a lot of the tedious work involved with managing state.

 

 

[GaryD]

Will do.  Thanks for this feedback.