Stack Overflow
Stack Overflow

Questions tagged [react-animations]

109 questions
0
votes
0 answers

LayoutAnimation in React-Native not running

I'm trying to animate a stack of cards moving up as the cards on the top get swiped off the deck but I cannot make the animation to run. I try to run the animation when the number of cards on the deck changes useEffect(() => { …
Icaro
  • 14,585
  • 6
  • 60
  • 75
0
votes
1 answer

Animate.timing not working with nativeEvent onLayout

I'm trying to animate a View box sliding down to it's actual height. At first, if the View's max height, which is the height needed to see all the contents, is less than 70, there is no need for an animation. If the max height is greater than 70,…
frankied003
  • 466
  • 6
  • 26
0
votes
0 answers

Toggle component display using animations - React

I want to toggle certain columns in a table based on a button click. The columns should fadeIn from right on click of a button, and fadeOut to right on click of the button. I am using react-animated-CSS and for some reason, I am unable to get the…
arunmmanoharan
  • 2,535
  • 2
  • 29
  • 60
0
votes
2 answers

Animation in React: how can I make a table row from a dynamic table fade out on delete?

I have a react app in which I'm trying to make each table row fade out whenever a corresponding button to that table row is clicked. The idea is that when a delete button on that row is clicked the whole row will fade out and the rest of the rows…
Konstantink1
  • 575
  • 1
  • 8
  • 26
0
votes
1 answer

Move Xposition of View from 0 to its origianl position in React Native

const valueX = useRef(new Animated.Value(0)).current useEffect(() => { Animated.timing( valueX , { toValue : // How to get the original X position of the component here. duration : 1000, easing : Easing.linear …
Suman Bhattarai
  • 81
  • 1
  • 8
0
votes
2 answers

Issue with React Native animations

I'm facing a problem with centring the text after the animation finishes as you can see in the video here https://www.youtube.com/watch?v=hhBGUp9_GAY&feature=youtu.be. I want to get both titles perfectly centered horizontally on all devices no…
Yawning Outside
  • 1
  • 3
0
votes
1 answer

Animating element on enter/exit in react gsap

Basically I want to animate with gsap in react on enter/exit of an element , there seems to be no way to do this without complex hacks, I'm new to react animations and GSAP, can anyone please help atleast guide me where to look, Basically I have a…
sriram hegde
  • 2,301
  • 5
  • 29
  • 43
0
votes
1 answer

React-native animation time series with percentage or alternative for it

I'm trying to port react component to React-Native using react-native's Animated I managed to create the circle and it's orbit and working good. but I don't know how to write those rules in react-native's Animated in @keyframes…
Snowflake
  • 191
  • 1
  • 2
  • 13
0
votes
1 answer

Issue with react-animation-components package

So in my app I am adding react-animation-components by typing yarn add react-animation-components@3.0.0 Then I import the FadeTransform property import { FadeTransform } from 'react-animation-components'; However, I am getting this message stating…
Theo
  • 3,099
  • 12
  • 53
  • 94
0
votes
1 answer

How do I integrate a background JS animation into my react app?

I'm trying to add a firefly animation into a component within react (and the code I'm trying to use is here https://codepen.io/celli/pen/xZgpvN). If I had a simple HTML / CSS / Javascript setup I'd know what to do, but I'm confused on how to…
pizza7
  • 441
  • 4
  • 17
0
votes
2 answers

react-animated-css not fired when list is updated

I am using react-animated-css, for simple animation in react. I have a list which I am rendering in a
    tag. I am adding animation to the first element of the list. This list is getting updated every 3 seconds. And new element is added at the…
BhaskerYadav
  • 569
  • 3
  • 24
0
votes
3 answers

ReactJS: React CountUp visible only once in visibility sensor

I am working on a page that has a visibility sensor so that whenever I scroll to that section, the animation starts. However, I only need it to be visible only once. const [scrollStatus, setScroll] = useState(false); const contextData = { …
danedelions_swift
  • 115
  • 1
  • 12
0
votes
1 answer

Is there a fluid CSS height property for elements entering the DOM? Jank happens when using Semantic-UI-React Transitions

I am not sure if this is the proper place to ask this question; I considered Software Recommendations however I figured I'd give it a shot here first. I am creating a PWA and with every iteration I'd really like to focus on making it look/feel like…
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
0
votes
1 answer

How do you Flip the screen like a coin transition in react native?

I am trying to make the screen flip like a coin when button pressed on it. What I have done up-till now is I have successfully flipped two small screens, but it comes to a bit large screen the code is not working. Like here in my code two simple…
Mohsin
  • 263
  • 2
  • 19
0
votes
1 answer

Is there a way to manually set the dy value in Animate.event?

I want to be able to bring a table up to a certain height when a condition is matched. How do I manually set the value of dy? this.state.drag.y returns an object. If it were a simple value, I could manually set it, but how do I set dy manually in…
Purnima Naik
  • 419
  • 1
  • 5
  • 16
1 2 3 4 5 6
7
8