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 classgoto
with attributedata-href=""
.If
data-href
orhref
is an anchor, include the current page path if you want stay on the current page. You don't need to do this forto
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.
Last updated