One of the most important thing that you will use is
A transition run between two pages of your site, leading the user to see a fluid and smooth animation instead of a browser “force reload” with a blank page.
A basic transition is made of a
leave animation, that is executed when leaving the current page, and an
enter animation that is executed when entering the next page:
Take a look at the lifecycle diagram to understand when
enterhooks are triggered during your page transition.
The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition.
- gsap — professional-grade animation for the modern web
- popmotion — simple libraries for delightful interfaces
- animejs — a lightweight library with a simple and powerful API
- mojs — the motion graphics toolbelt for the web
- spirit — the ultimate tool to create high-quality animations directly in the browser
For the demonstration, here is a basic opacity transition with gsap that consist of making the current page transparent, while the next page become opaque:
There is a lot of syntaxes that you can use when running your animation transitions. Take a look at the advanced transitions guide to learn more.