Category "framer-motion"

How to take benefit of Image component from Next.js and framer-motion svg animation

I have a Next.js project, where I am using framer-motion for some animations. I have the following code where using framer-motion I animated an svg: function Te

Framer Motion different Animations for different properties

I am trying to animate an animation in framer motion using Chakra-ui and Gatsby whereby there is rotation and movement and opacity change. At the moment the ani

Next.js + Framer Motion scroll progress animation

So I want to create a viewport scroll progress circle with Framer Motion in a Next.js app (using tailwind as CSS). I used the example code from Framer Motion: h

Apply motion to react component Framer-Motion

I know that I can apply motion directly to element/HTMLtag like this: <motion.div>some content</div> But how can I apply it to this? <Comp />

How to prevent content jumping in framer-motion animation when transitioning between two pages

I have essentially the following setup: <AnimatePresence initial={false}> {value ? ( <motion.div> {/* Page 1 content */} </motion

How to use framer motion animation with swiper.js (React)?

So the animations are only occurring during the initial page reload. I want the animations to execute every time I scroll down to another page. How do I use rea