made with vue.js

Vue Starport

Shared Component across Routes with Animations

Visit Site


Shared Component across Routes with Animations

"It's quite common you might have a same component used in different routes (pages) with a bit different sizes and positions. Sometimes you might want to animate them when user navigates between routes to provide a smooth UX. While such animation is common to be seen in native apps, it's could be a bit challenging to do it in Web.

Vue's component structure is presented as a tree, and the child components are in different branches with their own instances. Meaning when users navigate between routes, the components are not shared across routes. By that means you can't directly animate the changes because they are in two different instances.

The good news is, there is a technique called FLIP to enumerate the transitions between them. However, FLIP only solves the problem of transitions, the components are still not the same. During the navigation, the internal state of the component will lost.

Thus I started this new approach Starport to experiment with a better solution to fit this requirement!"


Anthony Fu

Social Media Links

Vue Lazyload Lazyload Images & Components
icon-eye-dark Created with Sketch. 1.955
Vue Loading Overlay Full Screen Loading Indicator
icon-eye-dark Created with Sketch. 22.446
Sentry for Vue Vue Application Monitoring
πŸ’š Sponsored by Friends
We’re hosting on Digital Ocean! πŸ’™ Try it today and get a free $100 credit.
tRPC-Nuxt Build typesafe APIs with Nuxt
icon-eye-dark Created with Sketch. 239
v-mask Input Mask Directive
icon-eye-dark Created with Sketch. 11.832