How to implement Page-Slide-Transition in React Router DOM

Question

I'm making a step-by-step form where I already made some Routes but problem is whenever I go to the next step I wanna get a slick and smooth page slide transition like Tab Transition in SoloLearn's Try it by yourself Code=>Output tab. I can implement a fade effect. But don't know how to implement The Slide Transition. Please help me with example code. Your little help will be much appreciated. Thanks💓

Answer 1

Use react router with framer.js

https://code.sololearn.com/WmC0gFvG6kvB/?ref=app

Answer 2

Thanks, Calviñ 🙏💕. U did a lot. But there seems to be an issue with SoloLearn play ground . It can't render it properly. But I used in Code sandbox and works fine. But I solved this issue with react-transition group. I'm intending to publish an simple npm package for that. Thanks again.