How to build a static blog part 11

Tuesday, 11 July 2023

Page transitions and an aside about triggering animations

At the moment, when we change from one page to another, the browser renders the new page very quickly, almost instantly. I think it's nice if we use a page transition, to make it feel a little smoother. Nothing too major as we don't want to make people nauseous with big movements or anything.

Nuxt provides a nice api for doing page transitions, so lets add some. Go to app.vue, and add the below at the bottom of the file. There's a few other places we could put these global styles, but here is as good a place as any.

<style>
.page-enter-active,
.page-leave-active {
    transition: opacity, filter 0.4s;
}

.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}
</style>

Then add the below to the defineNuxtConfig({}) object in nuxt.config.ts

    app: {
        pageTransition: { name: 'page', mode: 'out-in' },
        layoutTransition: { name: 'page', mode: 'out-in' },
    },

Now all the pages will fade nicely in and out. Also if you add any new layouts to the app, transitioning between them will also fade in and out nicely.

Aside about triggering Greensock animations

If you've visited the homepage of this blog, you may have seen the animated vue logo spinning around my head. I encountered an issue with triggering that animation caused by these page transitions. Check out this short post on the solution I came up with.

Once all this is done, and working, make sure you commit all your changes to your main git branch, and push to Github (or GitLab if you're using that) ready to make a deployment.

go back