rival-black

Page transitions

Hi, does anyone know if we can make entry/exit animations with libraries like framer-motion? I think entry animations do work but not exit ones, I've tried to wrap <Outlet/> in <AnimatePresence/> but that doesn't seem to be doing anything just like in React Router. Thanks

28 Replies

stormy-gold•3y ago

It’s possible but I’m not sure on the specifics yet.

deep-jade•3y ago

@Rafal my guess would be to programmatically trigger the animation on route change

stormy-gold•3y ago

Suspense and transitions should help here

rival-blackOP•3y ago

Great, thanks guys, I'll give it a shot again : )

foreign-sapphire•3y ago

Hey Rafal, did you ever figure this out? Currently also struggling with this

exotic-emerald•3y ago

Also curious about this. Would love some route transition 🙏

wise-white•2y ago

Anyone figured this out by now? 🙂

wise-white•2y ago

Neither this or with key={pathname} on either a wrapping fragment nor the outlet itself seems to have done the trick

wise-white•2y ago

Also see https://github.com/TanStack/router/discussions/823

GitHub

Page Transitions/Animations Using Framer Motion · TanStack router ·...

I plan on migrating my app to Tanstack Router, but I wanted to know what implementing page transitions with Framer Motion would look like? React Router v6 makes animating page transitions kind of a...

conscious-sapphire•2y ago

this works for me: https://codesandbox.io/p/devbox/reverent-elgamal-xm2xmd?file=%2Fsrc%2Froutes%2F__root.tsx%3A15%2C27

robust-apricot•2y ago

Can you also animate exit? Do you mean we should use these in our components ? Do you have any hint here? thanks

conscious-sapphire•2y ago

stormy-gold•2y ago

If we could make a component that would freeze the state for the subtree based on a key, it would work.

conscious-sapphire•2y ago

Instead of freezing the state, would it be better to have a <ManualOutlet state={useOutletState()} />?

automatic-azure•2y ago

If this works for you, you can probably just use native view transitions for both exit & enter, rather than going for react solution https://developer.chrome.com/docs/web-platform/view-transitions

Chrome for Developers

Smooth and simple transitions with the View Transitions API | Web...

The View Transition API allows page transitions within single-page apps, and will later include multi-page apps.

conscious-sapphire•2y ago

that looks exciting except that it's not polyfillable and it's not supported in the other 2 major browsers

automatic-azure•2y ago

Has a graceful fallback tho

robust-apricot•2y ago

is it planned in future versions?

metropolitan-bronze•2y ago

This demo seems to have been removed, do you happen to have an example repo saved from it?!

genetic-orange•2y ago

+1, would love to help explore how to make this happen

conscious-sapphire•2y ago

Minimal example with framer: https://stackblitz.com/edit/vitejs-vite-79hx6r?file=src%2Froutes%2F_withtrans.tsx but without the snapshotting feature, the route is swapped with the new route before exit transition has finished

foreign-sapphire•2y ago

Is it possible to animate route changes with view transition api?

    <Link
                    to="/about"
                    onClick={(ev) => {
                        ev.preventDefault();
                        document.startViewTransition(() => {
                            flushSync(() => {
                                navigate({ to: "/about" });
                            });
                        });
                    }}
                >
                    about
                </Link>

    <Link
                    to="/about"
                    onClick={(ev) => {
                        ev.preventDefault();
                        document.startViewTransition(() => {
                            flushSync(() => {
                                navigate({ to: "/about" });
                            });
                        });
                    }}
                >
                    about
                </Link>

Is using this kind of code good if I want to use view transition api? It seems to work, but feels bit hacky

rare-sapphire•2y ago

@Manuel Schiller have you deleted this sandbox if yes can you provide the link of this repo if you made that I would like to see how you added page transition

conscious-sapphire•2y ago

yeah I had to delete the sandbox since codesandbox introduced limits... but it looked similar to this

rare-sapphire•2y ago

Thank you so much and sorry for disturbing

stormy-gold•2y ago

I've got a simple example working here: https://github.com/TanStack/router/discussions/823#discussioncomment-8535087 Needs more testing to work properly with nested routes.

GitHub

Page Transitions/Animations Using Framer Motion · TanStack router ·...

stormy-gold•2y ago

^^ updated my answer above to be more robust when dealing with nested routes and params

inland-turquoise•17mo ago

supporting viewTransitions or this sort of component would be realy life saving. I have a project and had to create such component my self that freezes the router and provides it through a context. but because its so hacky, with every update usually something breaks and I have to spend hours understanding the problem and coming up with a solution. Its really a mess right now

Gaming

Programming

Page transitions

Did you find this page helpful?