tween previously appended divs when new appended div is added

[Guest kariannking]

in the codepen, if you click the button, it appends a div to a wrapper and tweens it upward, and adds it to an array. When you click the button again, it makes all previous appended divs jump up without a tween. I've poked around on the forums here for solutions without much luck.

 

Instead of making it just jump up, can I tween them up? I already tried to do it with a "position: absolute" in the css, but nothing tweens after the initial tween. They just stack (z-index wise) on top of one another.

See the Pen QjmoYZ by kking (@kking) on CodePen

[OSUblake]

Your problem is the same problem I was trying solve when I sought out something like GreenSock. I was trying to animate stacking toast messages, and couldn't figure out how to do it with CSS. My original solution was to use absolute elements, and I would animate all the existing elements to a new position when adding an element. If all your elements are going to be the same size, this is pretty easy to do. Your demo had too much code to work around, so I just made a new demo.

 

See the Pen YyLZKV by osublake (@osublake) on CodePen

[Guest kariannking]

Aha!

 

So your example pointed me in the right direction, thank you so much. The magical answer seemed to be absolute positioning, and also the ".unshift()" jquery method. I wasn't aware it was possible to push a new array item to the front of an array. Although, now that I say that, it seems pretty obvious that there would be.

[OSUblake]

I originally didn't have that in there. Before I changed it I was subtracting the total - i to get the correct index. I always get mixed up between the array methods to add and remove elements from the front. One is called shift, the other unshift. Really confusing.

 

One thing to beware about is that if your container resizes, you might have to reposition the elements. I just made a couple of changes to my code so that if it resizes, it will move the elements up instead of down. I just commented out the old code so you can see the change. Nothing drastic. There was also one change to the CSS file, using bottom: 5px instead of top: 5px.

[Jonathan]

Just to add my two cents kariannking.. anytime animating your elements with 2D transforms or 3D transforms, it is always best practice to either apply position: absolute or position: relative to make sure your elements animate correctly and out of the flow of the document