Declarative shared-element Transitions Between Pages for Vue.js

v shared element are shared cross-page element meta transitions for Vue.js.

shared element transition, shared element transition api, shared element transition android github, react navigation shared element, vue shared element transition

How to make use of it:

Install and download:

# Yarn
$ yarn add v-shared-element

$ npm i v-shared-element

1. Import and register the component.

import Vue from 'vue'
import {
} from 'v-shared-element'
import Vue from 'vue'
import {
} from 'v-shared-element'
const router = new VueRouter({ ... })

2. Add the v-shared-element component to the application form.

<div v-shared-element:namespace></div>

3. A basic example.

        v-for="contact in contacts"
        <span>{{ }}</span>
export default {
  data() {
    return {
      contacts: [
          id: '123',
          profile: '/path/to/',
          name: 'Vuescript'

4. All possible options.

 * CSS easing function
 * @default "ease"
easing: string
 * CSS duration
 * @default "300ms"
duration: string
 * CSS duration that controls
 * the "fade-out" stage of the animation
 * to blend the cloned node with the real one.
 * Set to `"0s"` to disable
 * @default "150ms"
endDuration: string | false
 * Setting to `true` will limit animations to `transform` and `opacity` only
 * @default false
compositeOnly: boolean
 * The z-index used for elements during the animation
 * @default 1
zIndex: number
 * If `true`, child nodes will be included in the animation
 * @default false
includeChildren: boolean
 * If `false` and the element we're transitioning **to** has a transparent background then
 * the element we're transitioning from will fade out.
 * If `true` the transparency of the element's background will be ignored.
 * This can also be an array of tag names that should be ignored (e.g. `['img', 'button']`).
 * @default ['img']
ignoreTransparency: boolean | string[]
 * Setting this to `true` will disable any shared-elements on the
 * current page **unless** they are in the viewport.
 * @default false
restrictToViewport: boolean
 * Prevents the shared-element from entering the cloning phase unless one of the following is true:
 * If `restrictToRoutes` is any array and the `path` of the upcoming route matches an item
 * in that array.
 * Or, if `restrictToRoutes` is a function and that function that returns true.
 * ---
 * Setting `restrictToRoutes` to `false` disables this behavior completely.
 * ---
 * @default
 * false
 * @example
 * ```html
 * <button
 *  v-shared-element:id="{
 *    restrictToRoutes(to, from, id) {
 *      return id === to.params.productId
 *    }
 *  }">Click me</button>
 * ```
restrictToRoutes: false | string[] | ((to: Route, from: Route, id: string) => boolean)

Declarative Shared-element Transitions, v-shared-element Plugin/Github

See Demo And Download

Official Website(justintaddei): Click Here

This superior jQuery/javascript plugin is developed by justintaddei. For extra Advanced Usage, please go to the official website.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Leave a Reply

Your email address will not be published. Required fields are marked *