Stack Overflow
Stack Overflow

Questions tagged [react-animations]

109 questions
1
vote
2 answers

how to stop framer motion animation run on every re rendering

I am using framer motion for animation and my problem is the animation triggers with every re rendering on my page. the behavior that I want is to animation only once on page entering or reloading not by re rendering. here is my component: const…
ali safaeyan
  • 65
  • 1
  • 11
1
vote
0 answers

add animation on text and repeat that same animation after every slide

I am learning react and code a function for image slider and change image title with every slide change. but I want to add any other animation on this text only and repeat that same animation after every slide change. I don't know how to do it can…
Jenil
  • 31
  • 3
1
vote
1 answer

React spring use transition leave/enter collision

I have two issues. Onload, the bottom links should render only once, but they are rendered twice. When clicking the box links at the bottom, the current links should smoothly fade out and the new ones fade in. Instead, the new ones initially fade…
Shining Love Star
  • 5,734
  • 5
  • 39
  • 49
1
vote
1 answer

How to achieve the ripple effect in React Native

In some applications, I see when a user is speaking the background of the user profile has these circles increasing and decreasing in radius. How do I achieve this using React Native and Reanimated-v2?
Chindukuri Pavan
  • 77
  • 1
  • 9
1
vote
0 answers

How to activate animation on Animate on Scroll library on up scroll

I want the animation to be triggered in both down and up scroll but AOS b default on triggers animation on down scroll. This is my code
img5
I tried putting…
Badal S
  • 507
  • 1
  • 3
  • 20
1
vote
0 answers

makeStyles animations do not work with React and Material UI

I want to animate this text to make it look like it's orbiting the globe. I am using React along with Material UI's makeStyles for the task. However, it doesn't seem to work. I used two different approaches; as you can see in the code. One is…
Amrovic
  • 344
  • 5
  • 13
1
vote
0 answers

AnimatePresence not working on Chrome but works fine on Firefox

I am trying to implement a simple fadeIn animation for tab contents using framer-motion. When I click on a tab I want to display contents of selected tab with a fadeIn effect, which is working as expected on Firefox but does not works on…
Pratik
  • 1,531
  • 3
  • 25
  • 57
1
vote
1 answer

How to set in/out animations with container for the Slide component?

I want a component to perform the slide animation to the right when it is mounted, and to the left when it is unmounted, all using the div belonging to the "profile-slide-container" class as the container of the Slide component, but I have no idea…
Gigi Carti
  • 53
  • 8
1
vote
3 answers

How to create custom animated floating label TextInput in React Native?

I created a TextInput in React Native, But I want the label go outside the box with animation when isFocused or filled with some value like: If value is null or empty the label must be inside the input, otherwise the label must move outside the…
Juhi Kukreja
  • 137
  • 4
  • 11
1
vote
1 answer

How to expand Flatlist on swipe up on React Native

Hi I’m a new developer that just graduated school so I’m working on a portfolio project. Sorry in advance if the question seems dumb. I have a carousel showing a gallery of images at the top of my screen and a vertical flat list for the second…
zosozo
  • 393
  • 2
  • 5
  • 16
1
vote
2 answers

React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample code

I am trying the sample code for React Animation: https://reactjs.org/docs/animation.html https://github.com/reactjs/react-transition-group/tree/v1-stable Demo: https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js …
kla
  • 63
  • 1
  • 8
1
vote
1 answer

Exit animation for children items not working in Framer Motion

I am making a hamburger menu animation in React using Framer Motion. When I click on the hamburger menu, the side drawer and the navigation items slide in from the left. When I click on the close menu icon, then the whole side drawer slides out to…
HKS
  • 526
  • 8
  • 32
1
vote
2 answers

React Native (Animations and setState)

I am facing a particular issue related to react native animations with setState (functional component), I have a countdown made with setInterval and each second I make a setState, whenever I have a setState the animation resets and restarts and I…
HichemProgramming
  • 51
  • 7
1
vote
2 answers

How to make widgets in NextJS

I have recently seen the Stripe site and there is a section with a card image that is filling the details automatically and then scrolling to the next tab and again it shows. Refer to this section of the site https://stripe.com/en-in/payments See…
prashant
  • 210
  • 2
  • 11
1
vote
1 answer

How to animate reordering of reducer array state in React Native LayoutAnimation

How can I achieve a reordering animation using React Native LayoutAnimation when a Redux reducer's property is updated? I have a players array in a Redux reducer, looks something like this: playersReducer.players: [{ "uuid":…
kirgy
  • 1,567
  • 6
  • 23
  • 39
1 2
3
4 5 6 7 8