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
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:
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
@Yi Lon Ma yes it is. I use Framer motion like this:
ts
'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.
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. 
