Stack Overflow
Stack Overflow

Questions tagged [react-animations]

109 questions
3
votes
1 answer

Translate a View inside an Scrollview in React Native

I'm trying to build this sticky header navbar in my RN app. Basically, an horizontal scrollview of categories that highlight the current category based on Y scrolling. Thanks to the video of great William Candillon…
Iván
  • 169
  • 5
2
votes
1 answer

Animation like slack comment box react-native

I am working on a comment box which I am expanding to the height of device on swipe up action and back to its original height on swipe down action. But I am not able to add the animation to it as the function does not work the way i wanted it to be.…
user2028
  • 163
  • 4
  • 15
  • 40
2
votes
0 answers

Integrating react locomotive scroll while using framer-motion's scroll trigger animations is buggy

I have a few framer-motion scroll trigger animations, nothing too complicated, in my current application and I wanted to integrate locomotive scroll using https://www.npmjs.com/package/react-locomotive-scroll. However, when I add it and start…
user17443811
  • 103
  • 3
2
votes
0 answers

Page link jumps to top of the page before exiting with Animate Presence (framer-motion) in React

I have a page where clicking on a link should land me on a different page after the exit animations of framer motion. The issue I'm facing is that the link is visible after scrolling down the page and upon clicking, the scroll goes to the top and…
krishnakirit04
  • 106
  • 1
  • 9
2
votes
0 answers

React Native Animation re runs after state change

How to stop react animation from reanimating after the state has changed? I have a textInput inside an Animated.View, upon OnChangeText, the animation reruns. This is the code for the animated view, it rolls down a view from the top of the screen…
Sahand Shahriari
  • 56
  • 8
2
votes
1 answer

React-Transition-Group: findDOMNode is deprecated in StrictMode

I am using the animation library react-transition-group in react for animating a TODO list using and as shown below
    {incompleteTodos.map((task) => ( …
Varun Sukheja
  • 6,170
  • 5
  • 51
  • 93
2
votes
2 answers

How does react-transition-group CSSTransition work?

So I'm trying to use react-transition-group to animate the transition between the different sections of an app. I have the component I want to animate in the CSSTransition component in the following way: return (
German Cocca
  • 669
  • 1
  • 9
  • 17
2
votes
1 answer

Issue animating react components using framer motion on state change

Im having some issues getting an animation to work using framer motion. Any help would be greatly appriciated. Code Sandbox Example
abloom12
  • 25
  • 1
  • 4
2
votes
1 answer

React Reveal not working for array of data

Can't use React Reveal on array of data with .map() to produce effect from documentation. https://www.react-reveal.com/examples/common/ Their documentation gives a nice example

React Reveal

…
paul blackmore
  • 191
  • 2
  • 13
2
votes
1 answer

React-Native How to only trigger the click on an TouchableOpacity when the tap release

i am making a system like the tinder cards, you can swipe left and right, but now i want to add a way to click on it. Wheen i add a touchableOpacity i can't moove it anymore because when i place my finger on it, it change the opacity of the view and…
quentin mayer
  • 137
  • 1
  • 1
  • 12
2
votes
0 answers

React Native dynamically adjustable Pie Chart

I'm building a react native app where the user should be able to move an adjuster around a pie chart to adjust the start and end angles of the pie slices. I'm using 3 panResponders and used the idea by /users/681830/val: react native circle…
TheSoma300
  • 72
  • 4
1
vote
1 answer

React Native Background Animation Reverse

I have an application that I wrote in react native. I tried to make an animated background with Animated Api and Image for this app. Animation works but only in one direction. After the animation runs, I want it to run in the opposite direction it…
ttars
  • 69
  • 6
1
vote
0 answers

How can I add image and Animation on React Konva, to work Simultaneously?

The first image of contains a lion and an animated gif of yoda When I drag animated Yoda on canvas it turns into image, How can I make both animations and images work on Canvas. I tried merging Animation code and image code, but didn't work.
Sham Mallik
  • 11
  • 1
1
vote
0 answers

React - Product Fly to cart animation using framer-motion

i want an animation that takes the product Card and put it on the card like a fly animation and i want to use the framer-motion the problem that i have is when i set the x,y of the animation all of them goes to the same place i tried the GSAP…
ayman jarmoune
  • 21
  • 1
1
vote
0 answers

Regarding applying animation to an image using dynamic CSS styles in React

I'm new to React. I have this image ("c-tile-img") inside a div ("c-tile-holder") and what I want to do is when I hover over the div or the image element I want to translate on Y-axis slightly like a hover effect. I used React useState hook to…
noobiereactdeveloper
  • 11
  • 1
1
2
3 4 5 6 7 8