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 Notion Unofficial Notion Renderer
icon-eye-dark Created with Sketch. 4.724
Oku Motion Motion Library
icon-eye-dark Created with Sketch. 125
Sentry for Vue Vue Application Monitoring
πŸ’š Sponsored by Friends
We’re hosting on Digital Ocean! πŸ’™ Try it today and get a free $100 credit.
Nuxt JSON-LD Nuxt.js Module to manage JSON-LD Data
icon-eye-dark Created with Sketch. 807
Nuxt Areas Scalable Folder Management for large Nuxt Projects
icon-eye-dark Created with Sketch. 1.661