4Catalyzer/found

Animating route transitions

dminkovsky opened this issue · 4 comments

dminkovsky commented

I would like to animate between routes. I would like to apply an animation to the exiting route, and an animation to the entering route. I'm using react-spring, and it seems like the https://www.react-spring.io/docs/props/transition API would work well if there was some way to simultaneously render the leaving and entering routes while they animate. I'm not sure how this might be done. I am using found-relay, if that makes a difference.

dminkovsky commented

I'll investigate this some more.

taion commented

Can you do something like https://github.com/react-restart/hooks/blob/300857fc3af63d274b7d73dab84e2b1dc778664b/src/usePrevious.ts with

const prevChildren = usePrevious(children);

Then use that to render the leaving route?

dminkovsky commented
dminkovsky commented

Actually you can, indeed, just use useTransition(), with pathname as the key:

const transitions = useTransition(
	children, // route children
	match.location.pathname,
	{
		initial: null,
		from: {opacity: 0},
		enter: {opacity: 1},
		leave: {opacity: 0},
	},
);


// then render
    
	{transitions.map(({item, key, props}) => {
		return (
			<Container key={key} style={props}>
				{item}
			</Container>
		);
	})}

where Container is animated.

UDPATE

This also works well with framer-motion's AnimatePresence.