Questions tagged [react-animations]
109 questions
0
votes
2 answers
change scroll from vertical to horizontal automatically when section comes in view
I am want to create a react site where while scroll when I get to services section page should change from vertical scroll to horizontal scroll for that section. Any idea how can I achieve this?
Abhishek Kokate
- 450
- 2
- 11
0
votes
1 answer
React component switch animation with a loader - Glitchy
I have a requirement where i have couple of components out of which only one could be displayed at a particular point of time. The components are of varying heights.
When a user clicks on the button in the currently displayed component i need…
Vikhyath Maiya
- 3,122
- 3
- 34
- 68
0
votes
0 answers
Custom Sliding bottom tab bar animation issue
I have made a custom sliding bottom tab bar animation for my application. But the issue is that when I click on the bottom icon to navigate it does not work and I have to click twice for the animation to work.
Here is the gif for the same.
And I…
Rohit Aggarwal
- 1,048
- 1
- 14
- 32
0
votes
1 answer
Reaching object that is declared inside a component from another component - React Native
I'm building a small grammar app. I simplified it here, at snacks
What the above app does so far
The app fetches and prints sample sentences according to our choices of article and noun genders.
Aim
My aim is, whenever a type of word is chosen…
Uygar Uçar
- 127
- 6
0
votes
2 answers
How can i make a child animation happen every time the parent animation is beginning using framer motion & react
I'm trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.
instead only the first time the animations run it works but after…
Sharon Geller
- 33
- 3
0
votes
1 answer
How to create moving image from right to left with reverse using react-spring?
Can someone help me with my propblem? I need to make animation with png image on my react project. My img must moving from right to left in own block with reverse in the end of the right side and left side. I made a part of my code, but cann't…
Alex Reed
- 1
- 2
0
votes
1 answer
Framer-Motion Exit Animation not firing on outer parent
Using AnimatePresence here from framer-motion and the exit animation of the outer parent does not seem to fire.
The enter animations fire for all 3 elements. For the exit animaions, only the 2 children's exit animations fire. The outer parent…
dazulu
- 11
- 2
0
votes
1 answer
react-native: How to add header animation in ScrollView onScroll
I am implementing animated header with ScrollView on screen. on scrollView onScroll I am also setting myview on base of scrollview Y position.
Like this
const onScroll = ({ nativeEvent: { contentOffset: { y, x } } }) => {
let _currentSection;
…
Azhar
- 20,500
- 38
- 146
- 211
0
votes
0 answers
How to render an animation depending on state?
I have a navbar that I need to animate using React Anime. Navbar contains Link component, which gets delay and duration as props.
Here's the code of navigation bar:
import React, {useContext, useState} from 'react'
import Link from '../Link'
import…
Michael Shkarubski
- 93
- 1
- 12
0
votes
0 answers
Handle component's mount and unmount order caused by react-router animations
I used CSS transitions from react-transition-group in order to make transitions between different routes animated.
Below is how the code roughly looks like:
Timur Rakhimzhan
- 123
- 7
0
votes
1 answer
How to animate a button from middle of the screen to bottom of the screen
I have implemented a floating button(TouchableOpacity)in react native. I was able to show and hide the button as per the scrolling position. Instead of showing and hiding i want to move button completely out of the screen(bottom)
when the scrollview…
Madhu
- 869
- 1
- 17
- 37
0
votes
2 answers
When animating and changing state, the animation disappears(react native)
I am using react native with expo cli and I have a component:
import React, {useEffect, useState} from 'react'
import {View, TextInput, Text, TouchableOpacity, Animated, Easing} from 'react-native';
import s from './Login_style'
import {connect}…
LIMPIX64
- 201
- 1
- 3
- 12
0
votes
1 answer
animatable is continuously making the view to grow
I used Animatable plugin to add some animations to my app components.
user14016776
0
votes
1 answer
animations not working - react-awesome-reveal
I want to use react-awesome-reveal in my typescript project but the animations doesnt seem to work. However, it works when I use react-reveal. Please advice on what I am missing.
import React, { Component } from "react";
import { render } from…
arunmmanoharan
- 2,535
- 2
- 29
- 60
0
votes
1 answer
How to access event.nativeEvent.layout.x in react native /w expo
I'm simply trying to access the x coordinate through the onLayout prop within a TouchableOpacity component in React Native and I'm getting an error in the emulator:
null is not an object (evaluating 'event.nativeEvent.layout')
This is my first time…
Chris Marshall
- 740
- 1
- 9
- 25