deglau

Thank you Jonathon! This should work great.

I have a list of items in an array that are stacked above one another. When I delete an item I am able to call TweenLite.to () to slide it right and remove it from the DOM via an onComplete function (my Codepen is a simplified example of my actual scenario). By design, the item underneath the one that has been removed snaps up to fill the space. What I would like to do is animate that movement where the list item replaces the previously removed item. My question may be a bit more fundamental in terms of how the DOM works, but is there a way for GSAP to capture that event and animate the move, or do I need to build a function that keeps track of each list item, its height and position, and manipulate all the items after the deleted one?

@carl, I was able to get this working great. Thank you for leading me in the right direction. Now with this, how could I add another (DOM) element to this? Would I have to create a new tween, or can I add the element in an array somehow? I know how to do it with a regular TweenLite.to() setup, but this seems a bit different. Maybe I'm just overlooking something...

This will definitely get me started. Thank you!

I don't have a codepen for this, because I am not sure of the proper approach. I am currently using ReactJS to mount, unmount and update my view components. Based on the state of a component, I have made changes to the linear-gradient of the background using TweenLite.to(). I was wondering what Tweens I should use in order to make these changes in linear-gradients, fluid. I.e., make the color that is in the top right corner, move down to the left corner, while the top right corner is replaced by another color. This process would repeat itself as many times as I needed it to. Is this even possible with GSAP?