#Use framer motion on SSR

26 messages · Page 1 of 1 (latest)

granite whale
#

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
regal shardBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sharp steppe
#

I saw in Twitter (X) how to use Framer motion in ssr

#

Wait

hearty bison
#

theres no need to eliminate usage of use client

image.png
#

you can lift the <div>Testing</div> as a {children} where you pass Server Component inside

sharp steppe
granite whale
granite whale
sharp steppe
granite whale
hearty bison
#

if you dont need to animate exit animation on unMount, afaik youdont need AnimatePresence

#

do your AOS requires exit animation on unmount? 🤨

granite whale
hearty bison
#

you already did that...

granite whale
granite whale
hearty bison
#

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

granite whale
# hearty bison its still a client component nonetheless

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 @sharp steppe
also @hearty bison i think that what you meant for me to do but i didnt fully understan thank you as well! awesome support

hearty bison
#

Nicee you found out the solution

granite whale