javascript - undersating page transition vs normal animations - Stack Overflow

admin管理员组

文章数量:1421688

Hello there I'm trying to understand the difference between page transition and normal page animations I use next js with a package called next-transition-router to create a transition animation that works totally fine and as expected

transition.tsx

'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 (
    <TransitionRouter
      auto
      leave={(next) => {
        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}

      <div ref={layerRef} className={s.layer} />
    </TransitionRouter>
  )
}

styles

.layer {
  background-color: var(--theme-secondary);
  inset: 0;
  position: fixed;
  transform: translateY(100%);
  z-index: 2;
}

I notice on this website

/

There is a background simple animation that comes from bottom to top while everything else in the background fades away, is this a page animation or a page transition? can I implement that in my current setup?

本文标签： javascriptundersating page transition vs normal animationsStack Overflow