How to animate absolutely positioned elements?

Question

css

There is the following code example:

When opening a block, a div that is within the parent's size animates smoothly. The element that goes beyond it - waits for the end of the animation and then instantly appears. Is it possible to somehow fix this and make it appear smooth?

Answer 1

The library (or part of vuejs, I don't know for sure) velocity, at the moment of animation, puts the overflow: hidden property on the element with the item class, and hides the elements outside the block.
If this is removed, it will not be possible to animate the text, its hiding cannot be made smooth without overflow: hidden.
this moment can be simply reversed in a way that is more comfortable so that the stick does not fall out without left: -20px:
Here is a slightly reversed (and working) thing - https://codepen.io/JimiMorrison/pen/jONxmaN