Skip to main content
921 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
0 votes
0 answers
37 views

I have created an animation wrapper: export function StaggerBlurElement({ children, blur = 10, ...
Sviatoslav Zubrytskyi's user avatar
  • 1
0 votes
0 answers
134 views

Context / goal: I’m building a Next.js project with Framer Motion for page transitions. The old page should slide out from its current scroll position, and the new page should slide in starting at ...
Jake Snellin's user avatar
  • 1
0 votes
0 answers
42 views

I have code like below (showing project list and filter button) const Projects = ({ loaderData }: Route.ComponentProps) => { const [selectedCategory, setSelectedCategory] = useState('All') ...
flyingduck92's user avatar
  • 1,692
0 votes
0 answers
79 views

How to create a vertical infinite animation in Framer Motion with a mask that changes div content when passing through it? I want to implement an animation in React + TailwindCSS + Framer Motion that ...
qnyx's user avatar
  • 11
0 votes
1 answer
62 views

I'm using BrowserRoute of react-router and I specify my routes like this with MainLayout contains Navbar and Outlet. There is a Stairs component with animation effects wrapping up my Home and Contact ...
CupOfTea00's user avatar
  • 13
3 votes
1 answer
154 views

I'm building a collapsible sidebar in React with Framer Motion, and am struggling to keep a static prop from re-rendering. More specifically, I create sidebar buttons with a SidebarItem.tsx component. ...
Syed Maroof Hussain's user avatar
  • 41
0 votes
0 answers
50 views

I'm trying to create an interactive hover button using Motion that: Shows idleText by default with a white background On hover, reveals hoverText while animating the white background away using ...
Bart Krakowski's user avatar
  • 1,670
0 votes
0 answers
76 views

I'm building a React component that rotates through words, animating them character by character using Framer Motion. My goal: The background container should resize smoothly to match the new word (...
Gustavo Felix's user avatar
  • 1
0 votes
1 answer
49 views

I'm experiencing a performance issue where a React animation component stops working properly when a custom cursor moves around the page. The two animations seem to interfere with each other. I have ...
MNBLabs's user avatar
  • 118
0 votes
0 answers
121 views

The npm run dev mode works fine, but I am getting a failed to compile error during the build process due to the below code snippet. These are the scripts, dependicies and dev dependicies in the ...
C N K's user avatar
  • 3
0 votes
0 answers
38 views

I am writing a web application in react-with-typescript: I use index.tsx as a layout component, I need to somehow delay the transition between pages so that the animation of filling the screen can ...
Frank McLover's user avatar
  • 1
1 vote
1 answer
102 views

Need help with simulating transition of widgets from one location to another. The new location is the location of another widget. If anyone is familiar with Framer Motion's layoutid, it's similar to ...
cup's user avatar
  • 13
2 votes
2 answers
61 views

While watching a YouTube tutorial by web animations expert Olivier Larose, I noticed something unusual and potentially against the conventional rules of React hooks. In the video, it appears that he's ...
AL Faiz Ahmed's user avatar
  • 393
0 votes
1 answer
79 views

import Poster from '@/components/poster'; import { motion, useScroll, useTransform } from 'framer-motion'; import { StaticImageData } from 'next/image'; import React, { useRef } from 'react'; type ...
Emil's user avatar
  • 155
1 vote
1 answer
1k views

I'm trying to create an infinite scrolling horizontal carousel of icons using React and Framer Motion. The animation works, but I'm encountering issues with visible empty space at the end of the ...
Alex Smagin's user avatar
  • 17
0 votes
1 answer
79 views

I'm using Framer Motion with React and trying to animate an <h1> element sliding into view from the left, inside a div that has overflow-hidden. My goal is to make the text look like it's "...
KruNNzA's user avatar
  • 13
1 vote
2 answers
114 views

Given a motion component, such as m.div is it possible to derive HTMLDivElement? Or, HTMLButtonElement from m.button, etc? Perhaps a type utility that could do something like this? type HTMLType = ...
Jonathan.Brink's user avatar
  • 25.3k
0 votes
1 answer
196 views

As provided in the code shown below, I am trying to scale a Portrait component to come to the front from its own position and at the same time keep that normal portrait in its position. Whenever I do ...
Bilal Fawad Khan's user avatar
  • 33
1 vote
1 answer
227 views

I'm working with a React/Next.js 15 project using Framer Motion to animate text components. I've created a custom <TextAnimate /> component that mimics the behavior of Magic UI's text animations ...
Sofiane R's user avatar
  • 132
1 vote
0 answers
68 views

I'm using (Framer) Motion to animate the height of a textarea in React. It starts with one row and automatically expands when the user types past the first line. But there's a visual bug: When the ...
Sayem's user avatar
  • 11
0 votes
0 answers
103 views

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 ...
Aashish Pal's user avatar
  • 35
0 votes
0 answers
48 views

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 ...
TeDi's user avatar
  • 57
0 votes
1 answer
101 views

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 ...
rajgopalbh4's user avatar
  • 89
0 votes
1 answer
185 views

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 ...
TejaML's user avatar
  • 21
0 votes
2 answers
108 views

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, { ...
thulhid's user avatar
  • 1
0 votes
0 answers
68 views

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 ...
Ashleigh Dawson's user avatar
  • 1
1 vote
2 answers
55 views

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 ...
Duetemu2's user avatar
  • 11
0 votes
0 answers
117 views

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 ...
Didiry84's user avatar
  • 1
0 votes
0 answers
57 views

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 } ...
TeDi's user avatar
  • 57
1 vote
0 answers
129 views

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 ...
TeDi's user avatar
  • 57
0 votes
0 answers
37 views

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....
Michel's user avatar
  • 11.9k
0 votes
0 answers
103 views

I have a path I wish to animate: <motion.path initial={{ pathLength: 0 }} transition={{ duration: 5, ease: 'easeInOut' }} whileInView={{ pathLength: 1 }} viewport={{ once: ...
panthro's user avatar
  • 24.2k
0 votes
0 answers
21 views

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. [...
Adheil Gupta's user avatar
  • 10
0 votes
0 answers
56 views

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 ...
Random Person's user avatar
  • 1
0 votes
0 answers
91 views

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 ...
M. Varun Reddy's user avatar
  • 43
0 votes
0 answers
30 views

I want to achieve the following behavior when clicking on a nav link in my header: Scroll smoothly to the corresponding section. Apply a spring animation to the section with stiffness=100, damping=15,...
san's user avatar
  • 11
1 vote
1 answer
257 views

After installing framer motion and applying some animations to my NextJS component, I get error, [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for ...
oyerohabib's user avatar
  • 467
0 votes
0 answers
74 views

When using useScroll and useSpring in Motion. If you have some scroll progress then, on page refresh : The animation restarts and animate progressively to match scroll value, instead of directly be on ...
Rémi Girard's user avatar
  • 713
1 vote
0 answers
73 views

I checked a similar Q&A on the forums but could not find the answer I was looking for. I am developing a static website with NextJS, Framer Motion, Tailwind, and SCSS. Everything was fine until I ...
Tolgahan Dayanikli's user avatar
  • 13
0 votes
1 answer
207 views

I am building a 3D website with different pages. I am trying to make "prior" sections disappear when advancing to "further" ones by setting their y-position to -5 when not on that ...
Veron's user avatar
  • 3
-2 votes
1 answer
130 views

I'm having trouble animating the SVG Transform string using framer-motion. I tried animating it in the usual (manual) way import { type FC, useRef, useEffect } from "react" import { animate }...
Jthorpe's user avatar
  • 10.3k
1 vote
1 answer
113 views

I'm making a portfolio site using Next JS and motion, for the projects section I'm animating project cards using whileInView. it is working fine but when I do soft navigation and move to the more ...
zain ul din's user avatar
  • 1
2 votes
2 answers
266 views

I am trying to re-create the string-sytems.co.uk (or you can see the GIF below) to learn the concepts of Next.js, Tailwind CSS, and Framer Motion. I'm new to all these things and need to design the ...
Sidath's user avatar
  • 469
0 votes
1 answer
101 views

I'm trying to build a website using React and framer motion and I'm running into a challenge. If an element is in the viewport when the page initially loads, I want there to be a delay on the ...
matt's user avatar
  • 370
0 votes
0 answers
49 views

I have a fairly complex page that contains several nested layers of React components inside a Framer Motion <LayoutGroup>, containing a large number of leaf <motion.div> instances. What I ...
Derek Thurn's user avatar
  • 15.5k
1 vote
1 answer
241 views

I am trying to animate some things using Motion (previously Framer Motion) for React (19) in a NextJS 15 project. The problem is, that I cannot apply the colors defined in the global.css file in ...
Mitrajeet Golsangi's user avatar
  • 145
0 votes
0 answers
18 views

On desktop I have text which floats in from an X axis, it is out of view until you scroll to it. On mobile I intend to change this to be a small "bump" on the Y axis. I have tried multiple ...
Sizmon's user avatar
  • 15
0 votes
0 answers
15 views

I’m working on a "Hero-style" animation and could use some advice. I have a card on my body that I want to "move up" into a modal, and I’d like to move the card and scale it up at ...
GFoniX's user avatar
  • 344
0 votes
0 answers
17 views

I am trying to optimize the hover function on the card to show the illustration image. But I am having some problems, hovering on each element will send a request to download the image. However, the ...
Nguyen's user avatar
  • 1
0 votes
0 answers
42 views

I created a sandbox for easy testing: https://codesandbox.io/p/sandbox/gj6x26 The issue I’m facing is that I can’t make the drawer snap to two positions. I want the drawer to snap at the bottom, ...
Hanzel Rodriguez's user avatar
  • 13

1
2 3 4 5
…
19