Crossfade

1npm install next-transition-router gsap

1'use client'
2
3import { useRef } from 'react'
4import { TransitionRouter } from 'next-transition-router'
5import gsap from 'gsap'
6
7export default function CrossfadeProvider({ children }: { children: React.ReactNode }) {
8  const wrapperRef = useRef<HTMLDivElement>(null)
9
10  return (
11    <TransitionRouter
12      auto
13      leave={(next) => {
14        const tl = gsap.timeline({ onComplete: next })
15        const wrapper = wrapperRef.current
16        const content = wrapper?.querySelectorAll('h1, p, .btn, .demo-badge')
17
18        // Simple crossfade out with subtle scale
19        tl.to(content, {
20          opacity: 0,
21          scale: 0.98,
22          stagger: 0.02,
23          duration: 0.3,
24          ease: 'power2.in',
25        })
26
27        tl.to(wrapper, {
28          opacity: 0,
29          duration: 0.25,
30          ease: 'power2.inOut',
31        }, '-=0.15')
32      }}
33      enter={(next) => {
34        const tl = gsap.timeline({ onComplete: next })
35        const wrapper = wrapperRef.current
36        const content = wrapper?.querySelectorAll('h1, p, .btn, .demo-badge')
37
38        gsap.set(wrapper, { opacity: 0 })
39        gsap.set(content, { opacity: 0, scale: 0.98 })
40
41        tl.to(wrapper, {
42          opacity: 1,
43          duration: 0.25,
44          ease: 'power2.out',
45        })
46
47        tl.to(content, {
48          opacity: 1,
49          scale: 1,
50          stagger: 0.03,
51          duration: 0.35,
52          ease: 'power2.out',
53        }, '-=0.1')
54      }}
55    >
56      <div ref={wrapperRef}>{children}</div>
57    </TransitionRouter>
58  )
59}