Slick Image Resize Page Transition with Nuxt & VueJS

It’s never been easier to animate native-like animations on the web. In this tutorial, we tackle how to create a Thumbnail to Full-width Cover Image Animation when switching routes.

Live Demo

1. Bootstrap a new Nuxt project

npx create-nuxt-app my-project

2. Add the following HTML in both components’ templates

In this case we also add this markup to our article.vue component inside the pages folder

3. Sprinkle a little CSS flair

Let’s get down to the nitty gritty. To manipulate the image’s scale easily, we’ll be using GSAP, but this is completely optional of course.

4. Transform the image into a thumbnail

The secret behind this transition is scaling down the cover image to a thumbnail when the component has mounted. First, we need to calculate the scale factor between the cover’s size and the thumbnail’s size.

Then, we set the wrapper’s scale to the calculated proportions.

And finally counter-scale the image in order to preserve the aspect ratio.

Final Step — The fun part

To define a custom transition for a specific route, Nuxt offers the transition key that we can append to the page component.

This allows us to use CSS transitions/animations or in this case, the Javascript Hooks built into Vue.

Inside the leave hook, we use GSAP to animate the wrapper and image’s scales back to their original sizes and voilà!

Hopefully this tutorial gives you a better understanding of these tricky animations! Feel free to dig into the Github repo for the full example.

For any inquiry, send us a message at hej@sahkyo.com or check out our website sahkyo.com 🍀