Open source, production-ready animation and gesture library for React https://framer.com/motion
Questions tagged [framer-motion]
244 questions
0
votes
0 answers
How to use Framer motion with css libraries in React
I would like to use Framer motion in my component where I depend on react-semantic-ui library. I can have animation when component mounts but when I would like to have animation on each child in my map, I have a problem with styles because I have to…
Emin
- 149
- 11
0
votes
0 answers
I can't get AnimateSharedLayout from Framer Motion to work
I'm trying to get AnimateSharedLayout from Framer Motion's beta package in my react app. I've set the layoutId s to be the same and wrapped them in the AnimateSharedLayout.
I've setup a StackBlitz of the problem here.
Does anyone know what the…
ghertyish
- 168
- 1
- 11
0
votes
0 answers
Framer Motion library not working properly with reagent
I'm using the framer-motion library to animate a div mount
This is what I have:
(:require [framer-motion :refer (motion MagicMotion AnimateSharedLayout AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion])
(def div…
lamp bottle
- 481
- 3
- 12
0
votes
0 answers
Framer motion - animate svg rect height
Is it possible in framer motion to animate the height attribute of a rect in svg
https://codesandbox.io/s/transforms-8nqdg?file=/src/index.tsx
rrag
- 397
- 2
- 11
0
votes
1 answer
NextJs / Framer Motion: When using useViewportScroll I got this warning: Warning: useLayoutEffect does nothing on the server,
I am using NextJs with Framer Motion. Everything is working properly but I got this warning:
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a…
Tiavina MIchael
- 51
- 1
- 2
0
votes
0 answers
Framer-Motion - motion dragging img
I am working on a game where you can play with the position of the images/text/shapes using motion drag.
However, I haven't found a way to make it work for the .img or .png.
They show a way that you can achieve that using the .svg. However, it can…
Ade N
- 95
- 9
0
votes
1 answer
How can I disable AnimatePresence animations on initial load?
I have a bunch of elements that are animated using AnimatePresence, but I don't want them animated in during the initial load of my component, only during subsequent interactions with the component. Is there a simple way to disable AnimatePresence…
w.brian
- 13,695
- 12
- 57
- 100
0
votes
0 answers
Framer Motion | Viewpoint 'useAnimation' triggers after the last animation loads
After reading Framer Motion's documentation, I couldn't find, or maybe I have missed, a possible way to trigger an animation when an element gets into a viewpoint. I've been doing a recommended way to do it, but only with one element. When I add…
0
votes
1 answer
How can an SVG image transformed into a React component be used as a background image?
In my Gatsby website, I intend to use some animated backgrounds, so I got SVG images, transformed them into a React component and animated certain groups of the SVGs with Framer Motion.
The results are brilliant: I have animations that get displayed…
Giulia
- 601
- 1
- 6
- 22
0
votes
1 answer
In framer-motion, how to animate pure data like a number from 0 to 100?
How can I animate a pure number from 0 to 100 with a transition config?
{num}
Yokiijay
- 393
- 3
- 15
0
votes
1 answer
Animate does not work with whileHover in React
I'm currently facing this problem where my animate refuse to work despite my scale being triggered on hover.
I went through the documentation and still can't figure it out. What did I miss out? Help!
Here's my code and warning from browser:
…
azriebakri
- 943
- 2
- 9
- 28
0
votes
1 answer
Gatsby build / SSR swapping out components causing display errors
Update: the below has been resolved, but I'm running into a similar issue:
In my gallery template (for an example page see here everything loads fine if navigated to via the site. On refresh, the grid parent div (GalleryGrid in styled-components) is…
jenniferkshields
- 71
- 1
- 7
0
votes
2 answers
Framer: Check if element is into viewport
While using Framer Motion API to create interaction and animations on my site, I can not find how to use it in order to trigger an animation when something is on the screen.
For example, this SVG draws correctly, but Framer does not wait for the…
Biomehanika
- 1,411
- 1
- 15
- 38
0
votes
1 answer
How to fix "Parsing Error" when adding the
I started a new react app [create-react-app] and installed framer-motion. The app runs as expected until adding a framer motion element:
export const HomePageTemplate = ({ home }) => {
return (
Hello
Mitchell Hart
- 1
- 2
-1
votes
1 answer
Can I use the '
Recently I found this article: Page Transitions in Next.js with Framer Motion for page transition and I'm curious about the:
MikMik
- 1
- 2