Category "framer-motion"

Framer Motion - How to delay just the first animation

Is there anyway to delay an animation only for the first animation? For fun I'm trying to animate a button whose background moves only after 1 second of mousing

react The swipe animation will be performed twice

When you press the Circle button, the Box moves to the right and disappears from the screen. Additional information (FW/tool version, etc.) react scss Typescrip

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