From d1ebc744e2d485ee61db017c2763e7cf94203d26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ismael=20Mart=C3=ADnez?= Date: Wed, 20 Nov 2024 16:58:51 -0300 Subject: [PATCH 1/2] add transition component --- app/(pages)/layout.jsx | 3 +- components/transition/index.tsx | 48 +++++++++++++++++++++ components/transition/transition.module.css | 7 +++ package.json | 1 + pnpm-lock.yaml | 29 +++++++++++++ 5 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 components/transition/index.tsx create mode 100644 components/transition/transition.module.css diff --git a/app/(pages)/layout.jsx b/app/(pages)/layout.jsx index 243b5537..dcc317f4 100644 --- a/app/(pages)/layout.jsx +++ b/app/(pages)/layout.jsx @@ -2,6 +2,7 @@ import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google' import { Debug } from '~/components/debug' import { GSAP } from '~/components/gsap' import { RealViewport } from '~/components/real-viewport' +import { Transition } from '~/components/transition' import { StyleVariables } from '~/libs/style-variables' import { colors, themes } from '~/styles/config.mjs' import '~/styles/global.css' @@ -73,7 +74,7 @@ export default function Layout({ children }) { {GTM_ID && } - {children} + {children} diff --git a/components/transition/index.tsx b/components/transition/index.tsx new file mode 100644 index 00000000..15d571bb --- /dev/null +++ b/components/transition/index.tsx @@ -0,0 +1,48 @@ +'use client' + +import { gsap } from 'gsap' +import { TransitionRouter } from 'next-transition-router' +import { useRef } from 'react' +import s from './transition.module.css' + +export function Transition({ children }: { children: React.ReactNode }) { + const layerRef = useRef(null) + + return ( + { + const tween = gsap.fromTo( + layerRef.current, + { y: '100%' }, + { + duration: 0.8, + y: 0, + ease: 'power2.inOut', + onComplete: next, + } + ) + + return () => tween.kill() + }} + enter={(next) => { + const tween = gsap.fromTo( + layerRef.current, + { y: 0 }, + { + duration: 0.8, + y: '-100%', + ease: 'power2.inOut', + onComplete: next, + } + ) + + return () => tween.kill() + }} + > + {children} + +
+ + ) +} diff --git a/components/transition/transition.module.css b/components/transition/transition.module.css new file mode 100644 index 00000000..9e336428 --- /dev/null +++ b/components/transition/transition.module.css @@ -0,0 +1,7 @@ +.layer { + background-color: var(--theme-secondary); + inset: 0; + position: fixed; + transform: translateY(100%); + z-index: 2; +} diff --git a/package.json b/package.json index 1e5df4f1..b98d8162 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "gsap": "^3.12.5", "lenis": "1.1.16", "next": "15.0.4-canary.5", + "next-transition-router": "^0.2.3", "postprocessing": "^6.36.4", "react": "19.0.0-rc-ed15d500-20241110", "react-aria": "^3.35.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c350a32a..4d3d4400 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: next: specifier: 15.0.4-canary.5 version: 15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6) + next-transition-router: + specifier: ^0.2.3 + version: 0.2.3(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110) postprocessing: specifier: ^6.36.4 version: 6.36.4(three@0.170.0) @@ -3207,6 +3210,9 @@ packages: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} + delegate-it@6.2.1: + resolution: {integrity: sha512-3/P/rwj+zal/99EEml7y1+bXjBY+Wok/WSg0EngWAtdvHK6iKTPbABQE84RyyRfR0Fmejs93BrkZQWlgyeWuFQ==} + dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} @@ -4008,6 +4014,13 @@ packages: neo-async@2.6.2: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} + next-transition-router@0.2.3: + resolution: {integrity: sha512-IIDPzHx+a4pmzm1xdFVLEvbnKnInpd7Ohvw0+amaiik3XVvbmuMRJepW8/esE/av4VoK1bQuMY1SZLWyZZ6LTA==} + peerDependencies: + next: '>=14.0.0' + react: '>=18.2.0' + react-dom: '>=18.2.0' + next@15.0.4-canary.5: resolution: {integrity: sha512-0Xb0tjDadaH3KNonyZnT97+fGOet13WlVAGhTfGLNkz3BZ4GvD88vT7Qx2pkoPgPN0Cr9mxQrNNwpZ0sLbVxHg==} engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0} @@ -5097,6 +5110,9 @@ packages: resolution: {integrity: sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==} engines: {node: '>=16'} + typed-query-selector@2.12.0: + resolution: {integrity: sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==} + typescript@5.6.3: resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==} engines: {node: '>=14.17'} @@ -9150,6 +9166,10 @@ snapshots: delayed-stream@1.0.0: {} + delegate-it@6.2.1: + dependencies: + typed-query-selector: 2.12.0 + dequal@2.0.3: {} des.js@1.1.0: @@ -9917,6 +9937,13 @@ snapshots: neo-async@2.6.2: {} + next-transition-router@0.2.3(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110): + dependencies: + delegate-it: 6.2.1 + next: 15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6) + react: 19.0.0-rc-ed15d500-20241110 + react-dom: 19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110) + next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6): dependencies: '@next/env': 15.0.4-canary.5 @@ -11202,6 +11229,8 @@ snapshots: type-fest@4.26.1: optional: true + typed-query-selector@2.12.0: {} + typescript@5.6.3: {} undici-types@6.19.8: {} From 38f4b9ae360e08e4a05e50c6072c5bdeb0fdff35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ismael=20Mart=C3=ADnez?= Date: Thu, 21 Nov 2024 16:45:15 -0300 Subject: [PATCH 2/2] update next-transition-router to version 0.2.5 --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b98d8162..6cf887b0 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "gsap": "^3.12.5", "lenis": "1.1.16", "next": "15.0.4-canary.5", - "next-transition-router": "^0.2.3", + "next-transition-router": "^0.2.5", "postprocessing": "^6.36.4", "react": "19.0.0-rc-ed15d500-20241110", "react-aria": "^3.35.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d3d4400..163d4310 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -54,8 +54,8 @@ importers: specifier: 15.0.4-canary.5 version: 15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6) next-transition-router: - specifier: ^0.2.3 - version: 0.2.3(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110) + specifier: ^0.2.5 + version: 0.2.5(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110) postprocessing: specifier: ^6.36.4 version: 6.36.4(three@0.170.0) @@ -4014,8 +4014,8 @@ packages: neo-async@2.6.2: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} - next-transition-router@0.2.3: - resolution: {integrity: sha512-IIDPzHx+a4pmzm1xdFVLEvbnKnInpd7Ohvw0+amaiik3XVvbmuMRJepW8/esE/av4VoK1bQuMY1SZLWyZZ6LTA==} + next-transition-router@0.2.5: + resolution: {integrity: sha512-vqk3M1oY89TkMrzEf4A25/o/LD8o5FWy2WWBV+7mEb8pFZ71NA6rpkA2E+CJP/NUVl9+noLdR9+zSD0DDhPSpw==} peerDependencies: next: '>=14.0.0' react: '>=18.2.0' @@ -9937,7 +9937,7 @@ snapshots: neo-async@2.6.2: {} - next-transition-router@0.2.3(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110): + next-transition-router@0.2.5(next@15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6))(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110): dependencies: delegate-it: 6.2.1 next: 15.0.4-canary.5(@babel/core@7.26.0)(babel-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110)(react-dom@19.0.0-rc-ed15d500-20241110(react@19.0.0-rc-ed15d500-20241110))(react@19.0.0-rc-ed15d500-20241110)(sass@1.80.6)