We Keep Coding

Doing a complex translation animation in React (Next.js) while route changes

I have been trying to do a complex (for me at least) animation in react for a week and I am still unable to do it. I have attached the ss of a minimalist demo I made up in figma because I cannot share the actual design file.
I am using Next.js and I have to trigger this animation when the route changes (which happens automatically).
I have so far been using react-spring with its useTranslate hook. With this hook, I can use a state change to trigger the animation and also unmount the component at the end of it. For me the, automatic redirect happens after a state change that is coming from the backend via a subscription. I am hoping to use that to trigger the animation.
I am logically dividing this animation into two parts:
First part is the background gradient fading out along with the list while the avatars is fading in. This happens all the same time.
The cards duplicating behind it's back and slowly translating downwards and fading out.
So far I have figured out:
How to simultaneously trigger the animations. This is easy as I can pass the same state to different useTranslate hook with the same config object and the animations can be triggered at the same time and lasted the same duration.
How to trigger the opacity animation which can fade the avatars in while fading out the list.
But I am yet to figure out how:
To fade out background like that.
Duplicate the cards one behind another and then slowly translating them down. Not sure how to target each individual cards either.
Actually chain these animations so I can trigger the second one after the first.
Has anyone ever dealt with these kind of situations? Any other option than react-spring? Is it possible or easier if I use SVGs? Any piece of advice would be great.
Link to ss

Apply background and transform transition using vue list transitions

The short: I'm having trouble understanding Vue transition groups, the offical docs, recommended practice, and how to combine all that to get what I want.
What I want is a list of items that when new ones appear they transition from green to white and slide into the list. Then when they leave, they transition from red to white and slide out of the list.
If you want what I have so far, here's a js fiddle I made that was derived from the vue doc's list transition example. It's almost there, the only thing that isn't working is that the leaving items don't transition from red to grey.
Everything below is what I've researched to get to this point.
The official docs says I can apply transitions in .enter-active and .leave-active since they are applied throughout the entire animation.
v-enter-active: Active state for enter. Applied during the entire
entering phase. Added before element is inserted, removed when
transition/animation finishes. This class can be used to define the
duration, delay and easing curve for the entering transition.
v-leave-active: Active state for leave. Applied during the entire
leaving phase. Added immediately when leave transition is triggered,
removed when the transition/animation finishes. This class can be used
to define the duration, delay and easing curve for the leaving
transition.
And later, the List Transition docs applies the transition css statement to the element's own class instead of any of the transition classes automatically applied by vue. This makes some sense, as even the items that aren't actively leaving or entering still need to transition around those that get added or removed.
But then I stumbled upon this github post where a VueJs member described an issue with applying transitions in .active classes:
It's true that this behavior can be a bit confusing but it's actually working correctly because of the transition being applied but not being left enough time to change the color:
The .leave and .leave-active classes are applied at the same time. Because element already has a background-color, this triggers a 5s transition from grey to red, but one frame after the leave class is removed and leave-to is adding, triggering a new transition to green. So the color never gets enough time to change to red.
The solution is not applying the transition on leave-active but only on leave-to so the first change do not apply a transition: http://jsfiddle.net/posva/o4Lqw5ts/):
The problem do not appear on enter because the browser do not get the time to render the element without enter so it appears with the blue initial color and triggers the transition from there

How do I change a an element's style without triggering a re-render in React?

I'm developing a video playback app using Electron. One of my requirements is a seamless transition between back-to-back videos. Due to load times, I can't really achieve that with a single video element. So I've gone with two video elements, laid out one over the other.
In regular HTML I can make this work fairly well. I fiddle with the z-index, and the two videos snap back and forth. Problem is that React doesn't seem to like me fiddling with the z-index.
I have tried several variations on the following three pieces of code:
this.frontPlayer.current.style = { ...this.frontPlayer.current.style, zIndex: "2" }
this.frontPlayer.current.style.zIndex = 2
this.frontPlayer.current.style.setProperty('zIndex', 2)
In each case, when I use console.log to examine the result, the style element breaks down. I have log statements bracketing the change, and I can see it go from a a style declaration that includes a z-index change, to a blank style index.

And having failed to post the question, the next morning I realize the problem. CSSStyleDeclaration objects aren't a React element, they're a native CSS element. While they have a zIndex property, they're meant to be updated via setProperty, using a standard css label of 'z-index'.
this.frontPlayer.current.style.setProperty('z-index', 2)

Simple transition for React component

I have a React component that I show/hide based on a button toggle from within its parent component. Instead of just appearing/disappearing on the page, I would like to animate the mounting and unmounting of the component to make it look as if it was sliding down from, and back into the parent. The parent is always visible.
One important note is that there are also components within the first child. One of my attempts involving CSS transitions have resulted in these children being stuck in place when the first child slides up/down. Additionally, Child has no fixed height -- it could be 100px or 1000px.
This is my only animation in the application, so I don't really want to get anything too heavy to drive it. I'm struggling to find what other people are using for this kind of thing.

For that kind of simple animations I generally use CSSTransation. The idea is pretty simple, this component will attach some classes to your element depending on the component state (mounting, unmounting,...), and you have to provide css for the animation.

I finally solved this with a small package called react-animate-height.
<div>
<AnimateHeight
duration={ 500 }
height={ height }
>
<Child />
</AnimateHeight>
</div>

React transition fade between new and old children elements

I have a React component rendering a child element via props.children.
The content of this child element is dynamic.
What is the best way to transition (fade out old, fade in new) between these elements?

Check out the React docs for some info on the ReactTransitionGroup add-on component. This should be able to do what you need.

Give this project a try: react-css-transition. It was created out of necessity because the official ReactCSSTransitionGroup was unreliable especially on lower end devices. Scroll down for the CSS Transition Group which is what you would need.
* Disclaimer, I'm the creator of react-css-transition