Skip to content

Instantly share code, notes, and snippets.

@mikehwagz
Created August 22, 2020 13:14
Show Gist options
  • Save mikehwagz/f2d891d1df80fb6bdf4b62000b6d450e to your computer and use it in GitHub Desktop.
Save mikehwagz/f2d891d1df80fb6bdf4b62000b6d450e to your computer and use it in GitHub Desktop.
Page transitions with GSAP in Next.js
import { SwitchTransition, Transition } from 'react-transition-group'
import gsap from 'gsap'
function MyApp({ Component, pageProps, router }) {
return (
<SwitchTransition>
<Transition
key={router.pathname}
timeout={500}
in={true}
onEnter={enter}
onExit={exit}
mountOnEnter={true}
unmountOnExit={true}
>
<Component {...pageProps} />
</Transition>
</SwitchTransition>
)
}
export default MyApp
function enter(node) {
gsap.from(node, {
duration: 0.5,
autoAlpha: 0,
})
}
function exit(node) {
gsap.to(node, {
duration: 0.5,
autoAlpha: 0,
})
}
@nmxmxh
Copy link

nmxmxh commented Jul 13, 2021

Hello, Is it possible to create more complicated transitions in NextJS with GSAP?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment