https://github.com/mdbootstrap/react-page-transitions

A stunning collection of React page transitions built with Bootstrap 5. Templates for transitions on scroll, slide transitions, animations on click, fading & more. https://mdbootstrap.com/docs/react/extended/page-transitions/
https://github.com/mdbootstrap/react-page-transitions

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js page page-transitions react transition

Last synced: 17 days ago
JSON representation

Host: GitHub
URL: https://github.com/mdbootstrap/react-page-transitions
Owner: mdbootstrap
Created: 2022-08-19T11:55:43.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2022-08-19T12:07:01.000Z (over 3 years ago)
Last Synced: 2025-05-10T08:47:01.830Z (12 months ago)
Topics: bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, html, js, page, page-transitions, react, transition
Homepage:
Size: 1.95 KB
Stars: 1
Watchers: 4
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)

# MDB React 5

A stunning collection of React Page transitions built with the newest Bootstrap 5. Transitions on scroll, animations on click, fading animations and many more

Check out [React Page Transitions Documentation](https://mdbootstrap.com/docs/react/extended/page-transitions/) for detailed instructions & even more examples.

If you want to learn more about the construction of the transitions and get to know the basic and advanced usage of this functionality - read the [Animations Docs](https://mdbootstrap.com/docs/react/content-styles/animations/).

## Examples

[Cards animations - Fade In Down:
![Bootstrap Page Transitions Cards animations - Fade In Down](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/3.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-1)

[Animation for Portfolio Card:
![Bootstrap Page Transitions Animation for Portfolio Card](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/4.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-2)

[Fancy Border Radius Animations - Pulse Infinite:
![Bootstrap Page Transitions Fancy Border Radius Animations - Pulse Infinite](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/8.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-3)

[Cards animations - Slide In Left:
![Bootstrap Page Transitions Cards animations - Slide In Left](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/2.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-4)

[Letters animations - Fade In:
![Bootstrap Page Transitions Letters animations - Fade In](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/1.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-5)

[Illustration Animation On Click - Slide In Down:
![Bootstrap Page Transitions Illustration Animation On Click - Slide In Down](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/6.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-6)

[Mixed Animations within Cards - Tada & Fade:
![Bootstrap Page Transitions Mixed Animations within Cards - Tada & Fade](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/5.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-7)

[Fancy Border Radius Animations - Tada:
![Bootstrap Page Transitions Fancy Border Radius Animations - Tada](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/7.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-8)

[Mobile App Animations - Fade In & Zoom In:
![Bootstrap Page Transitions Mobile App Animations - Fade In & Zoom In](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/9.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-9)

[Animation On Hover:
![Bootstrap Page Transitions Animation On Hover](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/content-styles/animations/examples/assets/10.jpg)](https://mdbootstrap.com/docs/react/extended/page-transitions/#section-10)

## How to use?

1. Download MDB 5 - PRO REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More extended React documentation