First, we need to make the component itself, for that I made 6 variants of the component, picture below.

1,2,3 are connected as entry animation, and 4,5,6 are for Exit animation.

These all are connected and have transforms applied to them to make the animation happen. For eg: Let's see the transforms in variant 2

With these, I've connected all the elements, and make the animation work as intended.

Next, it has to work in a category and be sticky as well.

For that, I made a section, and placed the component inside of it.

To make the component show up at the start, and exit at the bottom end or top end, was a bit tricky.

But I figured it out.

It uses scroll sections!

At start 1, it uses variant 4 which is the exit animation.

The animation actually starts one the first image is in the view port. If you go up from there, the exit animation activates.

Similarly, at the end section i use variant 4 to animate the exit.

It is actually simple, now that it works. Still took some thinking and tinkering.

Let me know your thoughts on this, and if you have any questions let me know. If you like this one you can share it to X or any where else. It helps me alot to keep making free components and resources for the community.

Enjoy the resource!