Add page transition component

[ismamz]

This is an implementation of the next-transition-router library.

It uses the auto-detect feature for simpler integration.

https://github.com/user-attachments/assets/f5991af0-f090-424c-98a6-f4ff0520fbaa

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
satus-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 7:46pm

[vercel[bot]]

@ismamz is attempting to deploy a commit to the darkroom Team on Vercel.

A member of the Team first needs to authorize it.

[clementroche]

Hey @ismamz thank you for your PR, we're trying to have this feature for a long time.

Let me see if i understand it well:

• preventDefault every the link click
• trigger exit animation
• navigate programatically using next/router
• trigger enter animation

[ismamz]

Hey @ismamz thank you for your PR, we're trying to have this feature for a long time.

Let me see if i understand it well:

• preventDefault every the link click
• trigger exit animation
• navigate programatically using next/router
• trigger enter animation

Hi @clementroche, I know you've been working on this. I think this may be a good solution for this stack, even if you migrate away from GSAP.

Correct, that's how it works. Just a few additions:

• preventDefault all links is optional, you can use a Link component for more control
• each stage of the transition is tracked in a state

[clementroche]

That works well for global "curtain" page transition however still not ideal for more complex page transition (eg: https://www.thomasmonavon.com/gregory-lalle) since we can have both pages (previous/next) visible at the same time. I know it's currently impossible with Next.

Also would be cool if we could trigger page enter/leave directly through the page, I think it's doable with a hook such as

function HeroAboutPage() {
  useTransitionRouter({
    onEnter: (timeline) => {
      // animate your page hero in
     timeline.add(...)
    },
     onLeave: (timeline) => {
      // animate your page hero out
     timeline.add(...)
    }
  })
}

[ismamz]

@clementroche yes, it works well with the "curtain" effect, but also if you want to do something with the elements in the current view before leaving the page.

That example is really smooth! You can create complex transitions with "shared" elements using GSAP and Flip, for example. Here, I built an example: https://github.com/ismamz/next-continuity-transition. It requires "manual" work, but it's possible 😅

https://github.com/user-attachments/assets/fe31bd22-47f2-4098-b56a-c2de1a26abd2

I've thought about a similar hook, and it's something that could be implemented. In that example, it would seem to be directly tied to GSAP (timeline). The idea was to make it agnostic to an animation library, but I will work on that!

[eloquent-peasant]

@ismamz "It works great; however, there is a bug. Let's say I have two links: / and /work. If I click on /work, the transition works fine, but if I click on /work again, the transition will always be present and will not fade away. any possible fixes?"

[ismamz]

@ismamz "It works great; however, there is a bug. Let's say I have two links: / and /work. If I click on /work, the transition works fine, but if I click on /work again, the transition will always be present and will not fade away. any possible fixes?"

@eloquent-peasant I’m not sure I understand correctly. If you click on the current page, there’s no transition because you’re not navigating to a new page; that’s the expected behavior. I think this is a library-related issue. If you prefer, you can open an issue here.