Implement page transition

[yllumi]

Hi @rehhouari,

Is it possible to implement page transitions in the current v7 codebase?
For example, I’d like to capture the content of the previous page, apply a class like .slideOut, and at the same time, apply a .slideIn class to the incoming page content.
This way, we can create a smooth page transition effect when navigating between pages.

If that’s possible, we can implement libraries like GSAP, Swup, or other page transition libraries in Pinecone.

[rehhouari]

I gave it a couple shots before but I haven't been able to figure out how to approach this.
applying a class when a page shows and hides meaning having both current template and previous template on the page. but where would each go? since pinecone now supports multiple children for a template I dont think putting the class on each one would be the right way. however creating a parent element could mess up nested styling..
not to mention what happens with templates that have no target but render inline? that's quite tricky.

I think I'll try making it for templates with target element only. then clone the target when a page changes? Not sure how to style them for proper transitions tho, should the new page start off as hidden?

Edit: Got some basic transitions working but its buggy. again I can't figure out which is the proper way to do it. If anyone sees this and want to take a shot at it they're welcome I'm not going to for now

Also, in v7 it's still using x-if method. x-transition doesn't work with x-ifs thus it doesn't work with this as well. it only works with x-show which keeps content in the page just hides it with css.