Transition Page Example

This is only an example. To make this animation a div is wrapped with FlipElement from the core package, just it. The vitepress router plugin is used.

Demo code

vue

<script setup lang="ts">
import { FlipElement } from '@vue-gsap-flip/core'

defineProps<{ type?: 'big' }>()
</script>

<template>
  <FlipElement id="box" v-slot="{ setEl }">
    <div
      :ref="setEl"
      class="bg-blue"
      :class="{
        'w-10 h-10': type !== 'big',
        'w-20 h-20': type === 'big'
      }"
    />
  </FlipElement>
</template>

Back to usage page

Transition Page Example ​

Transition Page Example