A lightweight pjax library for animated page transitions.
- 🦠 Tiny & minimal (1kb gzipped)
- 🗺️ Contextual transitions
npm i alio
Every page of your website will need exactly 1 element with an a-root attribute. The a-root needs exactly 1 child element with an a-page attribute.
<div a-root>
<div a-page>
<!-- Page content here -->
</div>
</div>Then create an alio instance and a transition called default. In alio, transitions are objects with async enter and leave methods. In the example below, motion is used to implement a basic fade transition, but feel free to use GSAP, or whatever other animation tool you'd like.
import { create } from 'alio'
import { animate } from 'motion'
const alio = create({
transitions: {
default: {
async enter({ from, to, href }) {
window.scroll(0, 0)
from?.remove() // we leave it up to you to decide when to remove the previous page from the DOM
await animate(to, { opacity: [0, 1] }).finished
},
async leave({ from, href }) {
await animate(from, { opacity: 0 }).finished
},
}
}
})
// alio events
alio.on('beforeLeave', ({ href, from }) => {})
alio.on('afterLeave', ({ href, from }) => {})
alio.on('beforeEnter', ({ href, from, to }) => {})
alio.on('afterEnter', ({ href, from, to }) => {})
alio.on('samePage', () => {})
// programmatic redirect
alio.go('/another-page')The alio instance offers an on method for listening to alio events. There is also a go method for programmatically redirecting to a different page.