Leave transitions not working when section is scrolled down.

[lestertarranza]

I have multiple full viewport height sections with animated contents. The first section loads up and animates the contents as expected since its already on the viewport but when I scroll down to the next section the leave transitions (x-transition:leave, x-transition:leave-start, x-transition:leave-end) are not getting triggered.

<div x-show="shown" x-transition:enter="lg:transition lg:ease-out lg:duration-1000 lg:delay-[2500ms]" x-transition:enter-start="lg:transform lg:translate-y-[-500px]" x-transition:enter-end="lg:transform lg:translate-y-0" x-transition:leave="lg:transition lg:ease-in lg:duration-1000 lg:delay-[2500ms]" x-transition:leave-start="lg:transform lg:opacity-100 lg:translate-y-0" x-transition:leave-end="lg:transform lg:opacity-0 lg:translate-y-[-500px]" class="flex flex-col items-center relative mt-14 md:mt-[27px] lg:mt-10 xl:mt-[50px]">

[SimoTod]

Transition leave triggers when x-show evaluate to false, it doesn't depend on the scrolling by itself