Next.js Discord

Discord Forum

Page transition animation with server components

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
TonkineseOP
Is there a recommended way for implementing page transition animation with server-components? Is it even possible?

7 Replies

Of course it’s possible, Some people would recommend [Framer Motion](https://www.framer.com/motion) for animations. You can also achieve some simple transitions by adding a fade-in animation with css.
yes it is. I use Framer motion like this:
'use client';

import { motion } from 'framer-motion';
import { ReactNode } from 'react';

import { cn } from '@/lib/utils';

function Wrapper({
    children,
    className,
}: {
    children: ReactNode;
    className?: string;
}) {
    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{
                opacity: 1,
                y: 0,
            }}
            exit={{
                opacity: 0,
                y: 20,
            }}
            className={cn('mt-8', className)}
        >
            {children}
        </motion.div>
    );
}

export default Wrapper;

and wrap whole content in this Wrapper component
wrap your jsx on per page basis
don't put it in root layout
ig you can still use server components nested inside a client component but I'm not sure
@Yi Lon Ma wrap your jsx on per page basis
TonkineseOP
Sound good - i will give it a try. :thank_you: