Questions tagged [react-animations]
109 questions
0
votes
0 answers
React native vanilla carousel animations
My carousel is currently working, but it does so with wonky animations.
I handle an array of images, where at the beginning and at the end I use the same image.
When displaying the final element of the array, it's supposed to go back to the first…
BautistaDiSanto
- 1
- 2
0
votes
0 answers
React Spring: Animating text with a background-clip applied
I have some text in a section that's styled using:
.text-wrapper {
background: linear-gradient(//gradient details//);
background-clip: text;
color: transparent
}
The basic markdown is:
…
jacquespariseau
- 3
- 2
0
votes
0 answers
ReactJs how to automatic scroll to bottom and then to top of a div element
I'm trying to create a div list with 30 items and create aimnimation to show all of it, the goal is to create a scroll animation to go to the bottom of the list and then go to top and so on.
I'm looking for a package or css trick but can't found…
Elsa
- 15
- 4
0
votes
0 answers
React: Sliding Animation and Conditional Rendering
I'm creating a React.JS Web App for educate myself. I want to create something like that: https://dribbble.com/shots/5311359-Diprella-Login.
Here is my sandbox: https://codesandbox.io/s/login-register-znvxjc?file=/src/components/App.jsx
Now, in the…
Görkem Tandoğan
- 33
- 4
0
votes
0 answers
requestAnimationFrame/animate function is being called but not displayed
I got a react component that uses Three.js for displaying a globe consisting of an earthmesh and a cloudmesh. I have a function (const) called animate, that rotates the globe and updates the TrackingBallControls, which I use additionally. I also got…
Harrihase
- 1
- 2
0
votes
1 answer
React Reanimated - Change Predefined Exiting Animation
Is there a way that I can a conditionally use predefined animations in React Native Reanimated? I'm using RNRA 3.
Example
const wasChosen = useSharedValue(false)
const onExit = () => {
wasChosen.value ? ZoomIn : ZoomOut
}
// Panresponder code…
Brandon-Perry
- 366
- 4
- 18
0
votes
0 answers
Animating SVG path points independently in Framer Motion
I'm trying to animate control points on SVG path independently. Let's say I want to draw a line from two points, point A on the left at (0, yA) and point B on the right at (100, yB).
I'd like to move yA to a random value within [0, 100]. After it's…
Art
- 453
- 4
- 12
0
votes
0 answers
How to do element transition from the element's position to another in React with Framer Motion Animation
I was trying to make a simple Button X & Y animation with framer motion, it transitions from element's point to another by interacting with it, just like Duolingo's word selection puzzles for example. The elements are also dynamically rendered,…
Lemon
- 1
- 1
0
votes
0 answers
react-animation-components not working... causing opacity: 0
When using the react-animation-components library, when I apply the Fade to any element it doesn't appear on the page. When I inspect the page the I notice that the elements are there but the Fade is causing the styling on the div to be:…
bigdg14
- 11
- 3
0
votes
0 answers
Dynamic Animation translate limits on Slider
I have a task where I'm creating a 'slider' essentially, but it has two bars on the same slider. What I'm trying to do is move those sliders up and down the y axis but the bar you are sliding is not to move past it's twin. eg. Top Slider is not to…
Andydlee0101
- 1
- 1
0
votes
1 answer
Framer Motion drag gesture on container but not child elements inside
I've created a carousel using the drag gesture in Framer, each slide contains a video component and some text. Is there a way to have a drag gesture on the entire carousel track but excluding the video components in each slide even though it's a…
Shauna Hallihan
- 1
- 3
0
votes
0 answers
How to animate the removal of a MUI datagrid row in a react app
I am new to using MUI and I'm trying to create a simple animation which would trigger when a row is removed by the click of a row button (either fade out or even better have it compress). I currently have a workaround solution in which I grab the…
thePunctuator
- 13
- 1
- 3
0
votes
2 answers
CSS animation for both spinning and moving a ball simultaneously
I have a simple react app with a div containing an SVG ball image.
Upon hovering on the image, I want it to rotate and move left simultaneously smoothly.
When hover state is false, I want it to rotate and roll back to its initial position.
I'm…
user19367608
0
votes
1 answer
How to trigger Navigation when an Reanimated 2 Animation is completed? React Native - Reanimated 2 & React-Navigation
I'm trying to create a Tinder clone where there is a left and right swiping mechanism for liking and disliking a profile. However, I want the user to swipe the profile downwards to open the profile details screen. I have tried creating the function…
0
votes
1 answer
How can I add animation to react state
I just want to add a fade in animation to next index. i found a package called "react transition group" but all tutorials were based on class components or redux I didn't understand anything.
const AboutTestimonials = () => {
const [index,…
Julia Schafer
- 387
- 1
- 6
- 15