969 questions
0
votes
0
answers
32
views
Motion: AnimatePresence not working for modal with createPortal
I was trying to integrate framer-motion (aka. motion) in my platform. I have a useModal hook which is created to simplify working with modals. It was already created and I was intergating the ...
- 35
0
votes
0
answers
30
views
Calculating offset to center a card in a carousel
I'm working on this React x Motion carousel that brings a card to the center of the screen when it has been clicked, depending on its index. However, the cards only seem to be placed at the start of ...
- 47
0
votes
1
answer
66
views
Framer motion skips animating a specific property
I am not able to animate the y property but the text animates opacity property .
How to animate both y and opacity properties . Both Y and opacity animate only for the first letter in string . I want ...
- 89
0
votes
1
answer
44
views
Using Framer Motion add class to div after scrolling fully past it
I have an element that becomes visible when it enters the viewport, with scroll animated child elements, I need for it to stay visible after scrolling past, with the animations done after, but ...
- 21
0
votes
2
answers
80
views
Why is the second character missing and an undefined character added in my typing effect? [duplicate]
I'm working on a simple typing effect component in React using Framer Motion. Here's the code for my TypingText component
TypingText.jsx
import { motion } from 'framer-motion';
import React, { ...
- 1
0
votes
0
answers
19
views
Chakra-ui/react Tauri Vite - Cannot initialise app after build (uncaught type error extendStatics is not a function)
Had this issue for a while where I can build to completion but initialisation leads to the following error:
react-BqWMAaNf.js:1228 Uncaught TypeError: extendStatics is not a function
at __extends ...
1
vote
2
answers
42
views
motion.div horizontal bar animation has a visible reset
I'm trying to make a horizontal bar that has an animation of scrolling forever from right to left, but the problem is that when the animation is over, you can visually see the reset, and it's really ...
- 11
0
votes
0
answers
55
views
Scrolling posts animation in React using TailwindCSS and Framer Motion like Ultra
I'm trying to create a scrolling posts animation in React using TailwindCSS and Framer Motion similar to this example link?
I tried to implement it this way, but it doesn’t work and doesn’t look as ...
- 1
0
votes
0
answers
16
views
Snap drag to center on motion react
I'm relatively new to motion, and I'm making this carousel that you scroll on drag. However the only issue is that the elements don't snap at the center when I drag.
Here's the code
import { useRef } ...
- 47
0
votes
0
answers
42
views
useMotionValueEvent not working on motion react
I just discovered motion for react (previously framer motion) and I just started learning it. I've gotten a hold of the basic syntax from the docs to make some simple animations. I'm working with ...
- 47
0
votes
0
answers
19
views
Working with framer-motion, getting the image size
I am trying to use framer-motion in a Next/React app, starting with some working examples.
But it is a bit hard to see what is going on, in some cases and know how to access some pieces of information....
- 11.8k
0
votes
0
answers
23
views
Animate When In View, Once
I have a path I wish to animate:
<motion.path
initial={{ pathLength: 0 }}
transition={{ duration: 5, ease: 'easeInOut' }}
whileInView={{ pathLength: 1 }}
viewport={{ once: ...
- 24.1k
0
votes
0
answers
18
views
Setting exit to string makes the animation disappear framer
Setting exit="visible" makes the ul and li animations disappear.
Setting it to exit={{ opacity: 1, scale: 1 }} makes the exit animation before the component leaves the DOM to never end.
[...
0
votes
0
answers
32
views
How to Make a Scroll-Based Framer Motion Animation Work Across All Desktop Resolutions?
I have a scroll-based animation in a React component using Framer Motion. It animates a set of cards (motion.div) as the user scrolls down. However, the issue I'm facing is that on certain desktop ...
0
votes
0
answers
35
views
Issue with replicating an apple-watch-grid view component (framer motion pro)
Goal:
I am trying to create an apple-watch-grid-view type component inspired by this example
Tech used
I am using ReactTS(vite) + framer-motion to achieve this
Current Progress and Problem
I have ...
