Stack Overflow
Stack Overflow

Questions tagged [react-animations]

81 questions
10
votes
5 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
  • 161
  • 2
  • 7
7
votes
2 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
  • 2,803
  • 3
  • 25
  • 51
6
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
  • 2,836
  • 9
  • 34
  • 67
5
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
  • 73
  • 7
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
  • 3,990
  • 3
  • 18
  • 42
4
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
  • 418
  • 4
  • 11
4
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
  • 133
  • 1
  • 7
3
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
  • 48
  • 8
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
  • 129
  • 4
3
votes
1 answer

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…
RiverOceanSea
  • 805
  • 1
  • 8
  • 18
3
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
  • 133
  • 1
  • 10
2
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
  • 49
  • 5
2
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
  • 55
  • 1
  • 11
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
  • 127
  • 1
  • 10
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
  • 60
  • 4
1
2 3 4 5 6