Diagonal Wipe

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 DiagonalProvider({ children }: { children: React.ReactNode }) {
8  const wrapperRef = useRef<HTMLDivElement>(null)
9  const overlayRef = useRef<HTMLDivElement>(null)
10
11  return (
12    <>
13      <TransitionRouter
14        auto
15        leave={(next) => {
16          const tl = gsap.timeline({ onComplete: next })
17          const content = wrapperRef.current?.querySelectorAll('h1, p, .btn, .demo-badge')
18
19          // Content fades first
20          tl.to(content, {
21            opacity: 0,
22            x: -30,
23            stagger: 0.03,
24            duration: 0.25,
25            ease: 'power2.in',
26          })
27
28          // Diagonal wipe covers screen
29          tl.fromTo(
30            overlayRef.current,
31            { clipPath: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)' },
32            {
33              clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
34              duration: 0.5,
35              ease: 'power4.inOut',
36            },
37            '-=0.1'
38          )
39        }}
40        enter={(next) => {
41          const tl = gsap.timeline({ onComplete: next })
42          const content = wrapperRef.current?.querySelectorAll('h1, p, .btn, .demo-badge')
43
44          gsap.set(content, { opacity: 0, x: 30 })
45
46          // Diagonal wipe reveals
47          tl.fromTo(
48            overlayRef.current,
49            { clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' },
50            {
51              clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',
52              duration: 0.5,
53              ease: 'power4.inOut',
54            }
55          )
56
57          // Content reveals
58          tl.to(content, {
59            opacity: 1,
60            x: 0,
61            stagger: 0.05,
62            duration: 0.4,
63            ease: 'power3.out',
64          }, '-=0.25')
65        }}
66      >
67        <div ref={wrapperRef}>{children}</div>
68      </TransitionRouter>
69
70      <div
71        ref={overlayRef}
72        style={{
73          position: 'fixed',
74          inset: 0,
75          background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)',
76          zIndex: 9999,
77          clipPath: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)',
78        }}
79      />
80    </>
81  )
82}