Questions tagged [react-animations]
81 questions
1
vote
1 answer
How to expand Flatlist on swipe up on React Native
Hi I’m a new developer that just graduated school so I’m working on a portfolio project. Sorry in advance if the question seems dumb.
I have a carousel showing a gallery of images at the top of my screen and a vertical flat list for the second…
zosozo
- 165
- 1
- 8
1
vote
2 answers
React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample code
I am trying the sample code for React Animation:
https://reactjs.org/docs/animation.html
https://github.com/reactjs/react-transition-group/tree/v1-stable
Demo:
https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js
…
kla
- 43
- 7
1
vote
2 answers
How to make widgets in NextJS
I have recently seen the Stripe site and there is a section with a card image that is filling the details automatically and then scrolling to the next tab and again it shows. Refer to this section of the site https://stripe.com/en-in/payments
See…
Prashant
- 26
- 3
1
vote
1 answer
How to animate reordering of reducer array state in React Native LayoutAnimation
How can I achieve a reordering animation using React Native LayoutAnimation when a Redux reducer's property is updated?
I have a players array in a Redux reducer, looks something like this:
playersReducer.players:
[{
"uuid":…
kirgy
- 1,415
- 3
- 22
- 37
1
vote
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
- 15
- 4
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,728
- 10
- 32
- 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
- 11
- 2
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
- 667
- 2
- 9
- 22
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
- 601
- 1
- 6
- 22
1
vote
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
- 101
- 2
- 8
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
- 21
- 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
- 720
- 1
- 6
- 18
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,505
- 6
- 24
- 53