Next.js Discord

Discord Forum

Page transition animation with server components

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

7 Replies

Avatar
fuma & joulev pray for Schneider
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.
Avatar
The ORM Hopper
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
Avatar
TonkineseOP
Thanks for the reply @The ORM Hopper, but i believe the 'use client' directory in the first line prevent it from being a server component.
My question is if it is possible to achieve page transition animation, while keeping the benefits of server components.
Avatar
The ORM Hopper
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
Avatar
TonkineseOP
Sound good - i will give it a try. :thank_you: