Stack Overflow
Stack Overflow

Questions tagged [react-animations]

109 questions
23
votes
3 answers

Animate children when hover at parent with Framer-motion

Using framer motion I want to animate my Icon component to rotate 90 degrees when hovering at the parent element which is a button. Visit our Industry {/*Animate this Icon to…
ArchNoob
  • 3,946
  • 5
  • 32
  • 59
19
votes
10 answers

React countup animation starts immediately after the page loading , should start when scrolled to the component (without jquery)

I have a react single page app, with multiple components. For the 5th component(visible only when scrolled down) I have a counter . Now I am using react-countup library to achieve the counter function. However , the counter starts soon as the page…
user659730
  • 381
  • 1
  • 3
  • 7
10
votes
1 answer

React Native Animated to scale an image

I have 2 issues with the Animated API. 1st: I am able to show the Image from left to right with the following code. I want to scale the Image from position X=40 (leftPadding), Y=100(topPadding), height:20, width:20 to X=20, Y=10, height:250,…
Somename
  • 3,376
  • 16
  • 42
  • 84
6
votes
0 answers

Pangesturehandler and Scrollview not working together

I coded a menu using PanGestureHandler and ScrollView. The problem is; when PanGestureHandler is active, ScrollView's scroll is not working. I mean swipe function is working but scrolling is not work. My expectation is using these two feature…
Emre Vatansever
  • 83
  • 8
6
votes
2 answers

React: How to Animate Expanding and Collapsing Div When the Size of the Content is Not Knowable

Question: I have a React functional component that recursively renders nested lists. That part is working fine. The part that I am struggling with is getting the divs that contain the nested lists to have an expanding animation when the nested…
Maiya
  • 932
  • 2
  • 10
  • 26
6
votes
1 answer

Animating react-transition-group with ReactDOM createPortal

I have been breaking my head trying to figure out how to accomplish something that I figured would be quite simple (I know...) Goal is for a very minimal, and reusable modal component that I can animate in some sort of HOC with a trigger button or…
artemartemov
  • 163
  • 1
  • 8
5
votes
1 answer

How to prevent component re-render (update) inside animations with REACT

These past few days, i've been playing around with different animation libraries for React, in an effort to find a solution for transitioning between views (not routes), where a view would be a component wrapping other components and so on. so far i…
man
  • 498
  • 5
  • 12
4
votes
1 answer

Rendering glb file in React using npx gltfjsx model.glb command

I am trying to add animation to my React project. Animation is taken from mixamo.com and then exported to a glb file using blender. I saved the glb file in my public folder. Next, I used: npx gltfjsx model.glb but I receive the following error: …
Somdotta Sarkar
  • 95
  • 6
4
votes
1 answer

Can't achieve smooth transition between react router pages with Framer Motion

It is been over a week now, and I can't get it to work!, I am trying to make a transition between react pages components to have it scroll up and down for each page.however, on exit page the second page takes longer to be displayed and I can't…
John Yacoub
  • 91
  • 1
  • 8
4
votes
1 answer

Changing Styles of Elements by Pan Gesture in React Native

I have a divided screen by squares and need to change their colors by touching with a finger continuously with pan gesture. At first, I thought I could do that by getting position of my finger by pan handler and find which element is located in…
Murat Çelik
  • 68
  • 9
4
votes
1 answer

react native modal time delay and jerky animation

I'm trying to build a react native screen that has a left-right carousel, in the each panel of the carousel there is a vertical flatlist with a list of items. At most there are 8-10 carousel panels and between 5-30 items in the flat vertical…
pinman
  • 93
  • 1
  • 3
  • 13
4
votes
0 answers

react-native-collapsible height not changing on adding some more view

I have a react-native-collapsible view, which render some of the components along with another Collapsible view. My problem is that after collapse the view of Collapsible component, if I add some components which increase the height of the…
Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57
4
votes
0 answers

What's the difference between setting the Animated Value in the onPanResponderMove method via "Animated.Event" and "setValue"?

If you want to drag and drop an element with PanResponder, you could pass the values of the movement to the onPanResponderMove method in two ways: 1. With Animated.Event onPanResponderMove: Animated.event([ null, { dx: this.state.pan.x, dy:…
Klemens159
  • 171
  • 1
  • 11
3
votes
3 answers

How to animate multiple framer-motion elements once in viewport

I'm using framer-motion to animate multiple elements in one page. Since framer-motion doesn't have an easy way of animating an element once it's in viewport I'm using this method: const controls = useAnimation(); const { ref, inView } =…
Sai Gujje
  • 31
  • 1
  • 2
3
votes
2 answers

React v17.0.1 - How can an animation be triggered when a div comes into viewport?

I am working on a web-app which I'm building by using React.js. I want to trigger an animation when the div comes into the viewport. Currently, I am able to run the animations but the animations don't wait for the div to enter the viewport. Let us…
noob_nerd
  • 531
  • 1
  • 6
  • 21
1
2 3 4 5 6 7 8