Page Transition Concept

This concept do 2 things for you:

• Smooth page transition when you request it.

• Help you to check if your new page need to refresh its contents before get render to the visitor. (It's not built for you, but it's ready to be done in just a few seconds.)

How it works

• Add data-transition="true" to <Link> or <a ...> elements for transition, otherwise, it will be direct.

• You can get the behavior of <Link> or <a ...> for other HTML elements by using class goto with attribute data-href="".

• If data-href or href is an anchor, include the current page path if you want stay on the current page. You don't need to do this for to attribute.

• When you stay on the same page, control anchor scroll behavior with data-behavior="smooth|instant". Defaults: "smooth" with GSAP SmoothScroller, "instant" without.

• When you change page, you can't control the scroll behavior. The scroll behavior'll be "instant".

• You can edit your leaving and entering transitions in src > front > js > components > PageTransition.jsx

Using mailto:, tel:, other protocols that are not http or https or using an attribute like download without target attribute will create a bug on click. e.g. use target="_self", target="_blank" or other.