npm package: @mdbootstrap/react-page-transitions
Description: A stunning collection of React page transitions built with Bootstrap 5. Templates for transitions on scroll, slide transitions, animations on click, fading & more.
Author: MDBootstrap
Latest version: 1.0.0

![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
<ul>
<li><a href="https://mdbootstrap.com/docs/react/extended/code/">React Bootstrap Code</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/gallery/">React Bootstrap Gallery</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/hamburger-menu/">React Bootstrap Hamburger Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/jumbotron/">React Bootstrap Jumbotron</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/maps/">React Bootstrap Maps</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/mega-menu//">React Bootstrap Mega Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/media-object/">React Bootstrap Media object</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/multiselect/">React Bootstrap Multiselect</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/masonry/">React Bootstrap Masonry</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/contact/">React Bootstrap Contact form</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/gradients/">React Bootstrap Gradients</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/pagination/">React Bootstrap Pagination</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/panels/">React Bootstrap Panels</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/social-media/">React Bootstrap Social Media icons & buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/search/">React Bootstrap Search</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-sort/">React Bootstrap Table sort</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-responsive/">React Bootstrap Table responsive</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-scroll/">React Bootstrap Table scroll</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/table-search/">React Bootstrap Table search</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/textarea/">React Bootstrap Textarea</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/sidebar/">React Bootstrap Sidebar</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/profiles/">React Bootstrap Profiles</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/">React Bootstrap Nested Dropdown</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/">React Bootstrap Address Form</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/back-to-top">React Scroll Back to Top button</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/product-cards">React Product Cards</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/avatar">React Avatar</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails">React Carousel Slider with Thumbnails</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/chat">React Chat</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/comparison-table">React Comparison table</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/comments">React Comments</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/drawer">React Drawer</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/faq">React FAQ component / section</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/invoice">React Invoice</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/news-feed">React News feed</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/offcanvas">React Offcanvas</a></li>
<li><a href="https://mdbootstrap.com/docs/react/extended/order-details">React Order details</a></li>
</ul>