Questions tagged [react-animations]
109 questions
1
vote
1 answer
A problem with react hooks with animation callback
import React, {useEffect, useState} from 'react';
import {Col} from "native-base";
import {Animated, TouchableOpacity, ViewProps} from "react-native";
interface AnimatedButtonProps extends ViewProps {
text: string;
size: Animated.Value;
…
Wei Chen
- 11
- 3
1
vote
0 answers
react-pose flip animation e.g thumbnail goes full screen
want to create a portfolio/projects page where user click on thumbnail it goes full screen and other page comes in
i guess i can achieve this using pose-flip
https://codesandbox.io/s/fourth-react-pose-example-qj92p problem is how i can do it with…
Yasir
- 3,817
- 10
- 35
- 41
1
vote
1 answer
How to use CSS Transition on click of input element ReactJS
I am new to ReactJS and have never used any animations in React yet with CSS.
I am trying to transition the width of an input on focus using CSS and it's not working out.
Below is my JSX & CSS code
…
user4770804
1
vote
1 answer
React Native Rotate Animation
I am trying to create an animation using hooks, but I have problems with my code.
can anybody help me?
No error appears when I test, but the image does not appear.
I'm trying to make a picture rotate on my loading screen.
export default function…
RaphaelLima
- 27
- 1
- 3
1
vote
1 answer
how can I stop the wheel of fortune to particular point using Animated API in React Native?
I'm developing wheel of fortune where I want the wheel to iterate four times while spinning, and stop to a particularly given value. All I want is to spin the wheel four times and stop to a particular slice. I'm thinking below code can work my…
Hiren Prajapati
- 717
- 3
- 10
- 25
1
vote
0 answers
Error while using react-animations library within a Gatsby JS website
I created a Gatsby JS website and I would like to use some simple animations for the text. The library 'react-animations' is the library I chose for the scope.
When installing it with
npm i --save react-animations
I get the following…
Giulia
- 765
- 2
- 8
- 33
1
vote
1 answer
Getting a 'Warning: `NaN` is an invalid value for the `background` css style property.' error
react-move/Animate error:
"Warning: NaN is an invalid value for the background css style property."
Original code was this:
enter={{
background: [stripe.background],
}}
SOLUTION:
I changed the value of the…
Reid McCulloch
- 31
- 1
- 6
1
vote
1 answer
how to create the react-reveal homepage text animation
I was impressed with react reveal home page text animation where the letters in "React Reveal" word fly from left , right and meets in the middle. So i thought i want to implement the same animation for my project home page but unfortunately i did…
saketh
- 803
- 1
- 10
- 24
1
vote
1 answer
How to make top to bottom animation with react styled components
I'm trying to recreate the slider on Gatsby's website but using the styled components library instead of the emotion library they used. The issue is the animation doesn't do anything and the list of strings I pass into the component get concatenated…
Jonathan Porter
- 1,365
- 7
- 34
- 62
1
vote
1 answer
How to change React Native Animated sequence timings on receiving props
I have a looping animation that I want the user to be able to change the timings of. Using a redux I have set it up so that the component being animated receives the new timings as props when the user changes them in settings. However this does not…
Billy Bromell
- 45
- 7
1
vote
0 answers
In React-Native Buttons are not clickable when I applied slide up animation
I am creating a view. Inside view there are some buttons and all buttons are clickable. I created those view . working fine all buttons are clickable though.
Now my requirement is that view should have slide up animation. so I searched a little and…
Tarun
- 1,192
- 2
- 11
- 20
1
vote
1 answer
Is it possible to assign a value (id) to animations in React Native?
Say if my animation is being iterated 20 times, but I don't want all of them playing at the same time. How would I go about triggering that one specific animation that have a value of 1. If I clicked on 1 then the other 19 should not trigger except…
Jane.S.Wilson
- 61
- 5
1
vote
0 answers
React Native Animation no longer starts. Is there something I did wrong?
The primary goal is to start an animation without all of them playing at the same time in my flatlist.
I have been working and researching the solution to this problem and I came to figure out that each animation needs to be unique in the flatlist.…
Laney Williams
- 573
- 3
- 13
- 34
0
votes
1 answer
How to reinitiate a frame by frame animation built on the React Hooks useRef, useState, and UseEffect stopped by a conditional state update?
This is a beginner project I'm working on which utilizes react to animate pixel art. It functions by using a brute force method of iterating through a array to set the images of the cat. A timer is passed as a parameter of the arrow function…
Matt Xu
- 5
- 2
0
votes
0 answers
Expand & Collapse a view such that the lower part doesnot go down , it will its position but the upper will move upward
i have a view that will come by animating from right to left, the main animated view contains two child view , now i want to add a middle view in between that two child view as default the lower part goes down , but i want not to push down lower…
React_Coder
- 353
- 2
- 12