Page transition animation with server components
Unanswered
Tonkinese posted this in #help-forum
TonkineseOP
Is there a recommended way for implementing page transition animation with server-components? Is it even possible?
7 Replies
fuma 💙 joulev
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.
Yi Lon Ma
yes it is. I use Framer motion like this:
and wrap whole content in this Wrapper component
'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
TonkineseOP
Thanks for the reply @Yi Lon Ma, 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.
My question is if it is possible to achieve page transition animation, while keeping the benefits of server components.
Yi Lon Ma
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
TonkineseOP
Sound good - i will give it a try.