How to create page transitions with React Router

Learn how to create page transitions with React and React Router.

Have you ever tried to create page transitions with React? What would be your approach? Let me know in the comments.

Working files - Follow step by step

Learn React

Premium Online Courses for front end developers and designers.

[harryashton]

Fantastically useful and clear to follow.

[celestecolamarino]

Amazing tutorial!! So clear and useful, thank you!!!

[TheJFadelli]

This video was great. Easy to follow, and made my task of implementing transitions with React Router very easy! Thank you!

[RickManu]

Thank you! This was really helpful, simple and useful solution!

[virginiawilcox]

This only has a thousand likes?! People are crazy!

[jamesfoley]

Great video thanks so much how did you figure that all out. I read the docs at react-transition-group, I checked out the docs at react-router. How the hell did you piece that together that drilling into to get the location.key etc etc was the solution for page animations....I would really like to hear how you figured that out. Your videos are some of the best in the react space.

[treybrittain]

I found that enabling the unmountOnExit prop for the CSSTransition component resolved the issue with the 2 components being rendered on top of each other (since I did not want absolute positioning for the components rendered with the transition)

[anastasiosarvanitis]

Thanx dude very nice video well explained and thnx for the github repo ;)

[moduntilitbreaks]

Great video from Petr as usual. If you need simple css transitions for you components/views - smart way is to make Animator component which will return all children and then wrap all of the components you want to animate. Create animation css class and give that to any div you want to animate. Simple, easy and effective.

[laurathomazi]

With the release of React Router v6 on november 3, how will this affect the method you presented? Thanks

[markhyoutube]

Great stuff, working a treat, thanks!

[MorkusReX]

Will it work in IE? We have to support IE in our product.

[Max-vnym]

Hey nice vid! I see your indentations seem to darken. Whats the extension called?

[Chaoticaa]

Thanks a lot Ihatetomatoes, this definitely helped a lot! Disclaimer: I love tomatoes. #pleaseDontHateMe

[filipmadunicky]

Thanks for helping to know how page transition works. Unfortunatly I use react-pose instead of react-transition-group. :) This new package works better for me and it has better documentation.

[mrgreen]

I have a problem with that, are there other ways without using react transition group . in my case, I have a transition that takes place on a div when I click on a button, I change the size of the div for example, but at the same time I want to change the route, how can I do that?

[jakub]

hey, cool tutorial :) do you know maybe why transform: translate not working on enter classes? I want my entering route to slide in from right side and exiting route to fade out and in this scenario whole mechanism of this package seems to get lost

[falkfrentzen]

Awesome video! However, there is a problem with elements below the animated routes - a footer for example. The .page properties seem to cause the footer to sit above the animated routes. Any idea how to fix that? Thanks!

[Libturd]

What if I needed to add different page transitions to different pages?

[sebastiancg._]

Thank you Sir for teach us this kind of content just because you want to. Our pay will be hit the link button, share and suscribe <3