Next.js Discord

Discord Forum

Use framer motion on SSR

Answered
Cornish Rex posted this in #help-forum
Open in Discord
Cornish RexOP
title says it all, im trying to run framer motion on server side componenets without the use client at top something like AOS
what i mean by like aos : layout.tsx
    <html lang="en">
      <body className={cairo.className}>
          <AosProvider>
              {children}
          </AosProvider>
      </body>
    </html>

AosProvider:
'use client'
const AosProvider = ({ children }: { children: ReactNode }) => {
    useEffect(() => {
        AOS.init({
            duration: 200,
            easing: 'ease-in-out-cubic',
            once: true,
        });
    }, []);
    return <>{children}</>;
}

export default AosProvider

and how i use it in server side componenets:
by adding these attributes: data-aos="fade-down" data-aos-duration="200" data-aos-delay="50"
<div data-aos="fade-down" data-aos-duration="200" data-aos-delay="50"></div>


how it is in framer motion:
const MotionProvider = ({ children }: PropsWithChildren) => {
    return (
        <>
            <AnimatePresence>
                {children}
            </AnimatePresence>
        </>
    )
}

export default MotionProvider

layout:
<MotionProvider>
  {children}
</MotionProvider>

to use in componenet:
'use client' <--- trying to eliminate the usage of use client
import React from 'react'
import { motion } from 'framer-motion'

const Testing = () => {
    console.log('Server')
    return (
        <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.25 }}
        >
            <div>Testing</div>
        </motion.div>
    )
}

export default Testing
Answered by Masai Lion
https://x.com/asidorenko_/status/1723654540379984129?s=09
View full answer

24 Replies

Masai Lion
I saw in Twitter (X) how to use Framer motion in ssr
Wait
aardani
theres no need to eliminate usage of use client
you can lift the <div>Testing</div> as a {children} where you pass Server Component inside
Masai Lion
@aardani you can lift the `<div>Testing</div>` as a {children} where you pass Server Component inside
Cornish RexOP
yeah that what i mean, i can use it that way to be server side but then to use different animations i must provide multiple providers for the each animation instead of 1 provider and changes on the ssr it self
@Masai Lion Click to see attachment
Cornish RexOP
mind linking the post? as i dont have x
Answer
@Masai Lion https://x.com/asidorenko_/status/1723654540379984129?s=09
Cornish RexOP
thank you so much
if you dont need to animate exit animation on unMount, afaik youdont need AnimatePresence
do your AOS requires exit animation on unmount? 🤨
@aardani Thats how AnimatePresence Works. Its meant to be redeclared for every component that needs exit animation on unMount
Cornish RexOP
i just used animatepresence randomly to test the ssr i think what what @Masai Lion sent might actually work export the motiondiv and import it as it is hmm
aardani
you already did that...
@aardani do your AOS requires exit animation on unmount? 🤨
Cornish RexOP
not really no its just for testing
@aardani you already did that...
Cornish RexOP
this way i meant
aardani
yeah
you already did that
its the same with what you did
the only difference is how the components are organized
its still a client component nonetheless
@aardani its still a client component nonetheless
Cornish RexOP
that exactly what i wanted to be able to use the animate={} etc... on server side and that is actually server sided the logs and everything is ran on the server instead of the client so i dont have to just wrap everything and having a headache how it use to be that method i just do:
const Testing = () => {
    console.log('Hello World')
    return (
        <MotionDiv
            animate={{ rotate: [0, 360, 0] }}
        >
            <p>HelloWorld</p>
        </MotionDiv>
    )
}

 ✓ Compiled in 291ms (1730 modules)
Hello World

and the logs are server sided that exactly what i wanted to achieve without creating the custom props and the childerns, thank you so much @Masai Lion
also @aardani i think that what you meant for me to do but i didnt fully understan thank you as well! awesome support
aardani
Nicee you found out the solution
@aardani Nicee you found out the solution
Cornish RexOP
yep thanks to the 3 of you :)) have a great day/night