DEV Community

Cover image for  Vue page transitions

Vue page transitions

danielhult profile image Daniel Hult ・1 min read

A page transition example using Vue and GSAP 3 together (works best on desktop size):

This was done using the Vue router, setting up some routes, and then using the JS hooks in the main Vue app instance. In there you can have your own @enter and @leave hook code.

The idea is that you add the image overlay and remove the text in the @leave hook, and then bring it in again from the bottom in the @enter hook.

Hope you like it!


Editor guide