Stack Overflow
Stack Overflow

Questions tagged [framer-motion]

Open source, production-ready animation and gesture library for React https://framer.com/motion

244 questions
2
votes
2 answers

Transition when doesn't work in Framer Motion

I am using Framer Motion as an animation library in React project. I am trying to animate parent element after child element using when attribute. It doesn't work, because ContentVariants and ImgVariants are running…
Matt
  • 6,793
  • 24
  • 89
  • 169
1
vote
1 answer

WordPress / Elementor to achieve page transition effect like React's Framer's Motion

Recently found a topic that really attracts me, which is the React Route and Framer Motion. I mainly build website with WordPress and Elementor, I'm curious if there are any way to achieve similar effect as React's Framer motion? For example click…
Luke Web Design
  • 13
  • 2
1
vote
0 answers

AnimatePresence and motion.div not working when using in ternary operator

I am learning framer-motion so that I can add nice animations in to my application. I am rendering a YES/NO value based on disclosure visibility and wanted to have fade-in/fade-out animation whenever YES/NO options gets rendered/exit. Below is the…
Pratik
  • 1,561
  • 2
  • 24
  • 53
1
vote
1 answer

How to move plane icon with framer motion?

I have a react paper plane icon that I would like to make a cool effect by making it travel around the HTML document reaching the final position which is the menu button at the top. This is how my react component called NavPlane looks like: import…
Rpx
  • 200
  • 11
1
vote
1 answer

Error in typescript using react framer Type '() => void' is not assignable to type 'undefined'

I am using typescript, react, and framer-motion. I created a Counter component whose number increases dynamically. However, I got a few ts errors. Type '() => void' is not assignable to type 'undefined'.ts(2322) error occurs in place ①. The error…
yyy rrr
  • 43
  • 3
1
vote
1 answer

Framer-Motion: How to Animate gradientTransform?

I'm using the framer-motion library in React. I have a component. I'm wondering how do I animate the gradientTransform property? I'd like to do something like gradientTransform: "rotate(90)" and animate rotating the gradient…
Paul Fidika
  • 11
  • 1
1
vote
1 answer

animate scaleX in framer motion without affecting children's scale

Framer motion 4 has depreciated useInvertedScale() It says to use the layout prop instead but it doesn't seem to achieve the same effect. I'm trying to scaleX a parent div whiteout affecting the scale of the children. There is more going on in my…
me-me
  • 3,084
  • 5
  • 33
  • 57
1
vote
1 answer

React Animation of menuItem in MenuBar does not work

I'm using react and typescript. The animation is done using framer-motion. When the button is pressed, the menubar opens. frame-motion animation is implemented in the menuItem, but the menuItem is not moving. I made it…
user15375616
  • 31
  • 5
1
vote
2 answers

How do you animate menu with framer motion on-click?

(Using React obviously + Gatsby) I have a hamburger button that gonna open a nav-menu in my website. I wanted to know how to make the menu open with an animation using Framer Motion.
David Kostuchenko
  • 31
  • 3
1
vote
1 answer

SVG Animation does not fill container in Safari

I'm having issues with SVG animation not filling whole container on Safari browser. For some reason on Safari width of my SVG seems to bo random, but it works fine on Chrome and other browsers. Expected behavior: After clicking menu icon, SVG…
Toster
  • 25
  • 4
1
vote
1 answer

React + Framer Motion fading out functional component

So I created this preloader that shows when the var loading = true but I want the loader to fade out! This is what my files look like. Home page with all the stuff. return ( <> {loading ? ( …
James Black
  • 11
  • 1
1
vote
1 answer

Why I need to provide the location object to Switch component to make exit animation work?

I am using framer-motion and react-router-dom in my app. I wanted to animate some route transitions and I was failing. The route components were being unmounted directly and no exit animation was being executed despite I was using the…
Danielo515
  • 2,933
  • 2
  • 19
  • 43
1
vote
1 answer

Styled-jsx styling not applied to Framer-Motion element

I think I'm loosing my mind. I created a new Nextjs project, installed Framer-Motion via NPM, ran the project in dev mode. Everything compiles and the page loads, but as soon as I add motion to an element, it vanishes with no errors. I'm getting…
Kevin Merinsky
  • 15
  • 3
1
vote
0 answers

Gatsby. Gatsby-plugin-intl and framer motion AnimatePresence problem

I need to create multilanguage site and I need to use framer motion to use animations and page transitions. I've used the most popular gatsby plugin for multilanguage functionality gatsby-plugin-intl. To implement page transitions I've used method…
John Smith
  • 922
  • 14
  • 34
1
vote
0 answers

Override the transition delay in React Framer Motion

I created motion.div component, which contains initial, animate and whileTap properties: ... in variation contains transition with the…
Олександр Данильченко
  • 93
  • 2
  • 6
1 2
3
…
16 17