Quick Start

Get up and running with Vue Flip in minutes. This guide will walk you through creating your first flip animation.

Basic Setup

First, install the required packages:

npm install @vue-gsap-flip/core gsap

Your First Flip Animation

There are two way to create make an element flippable:

• using the FlipElement component
• using the vFlip directive

In this example we create a simple flip animation that responds to a state changes:

Flip Element example:

Demo code

<script setup>
import { FlipElement } from '@vue-gsap-flip/core'
import { ref } from 'vue'

const isExpanded = ref(false)

function toggleCard () {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <div class="example">
    <button class="btn mb-2" @click="toggleCard">Toggle Card</button>
    <FlipElement
      id="card"
      :config="{
        flipVars: { duration: 0.3 },
        flipStateVars: { props: 'borderRadius,backgroundColor' }
      }"
      :trigger="isExpanded"
      v-slot="{ setEl }"
    >
      <div
        :ref="setEl"
        :class="{ 'card': !isExpanded, 'card--expanded': isExpanded }"
      />
    </FlipElement>
  </div>
</template>

<style scoped>
.example {
  width: 100%;
}

.card {
  background-color: white;
  border-radius: 8px;
  width: 100px;
  height: 100px;
}

.card--expanded {
  border-radius: 200px;
  margin-left: 50%;
  height: 200px;
  width: 50%;
  background-color: red;
}
</style>

Directive example:

Demo code

<script setup>
import { FlipElement } from '@vue-gsap-flip/core'
import { ref } from 'vue'

const isExpanded = ref(false)

function toggleCard () {
  isExpanded.value = !isExpanded.value
}
</script>

<template>
  <div class="example">
    <button class="btn mb-2" @click="toggleCard">Toggle Card</button>
    <FlipElement
      id="card"
      :config="{
        flipVars: { duration: 0.3 },
        flipStateVars: { props: 'borderRadius,backgroundColor' }
      }"
      :trigger="isExpanded"
      v-slot="{ setEl }"
    >
      <div
        :ref="setEl"
        :class="{ 'card': !isExpanded, 'card--expanded': isExpanded }"
      />
    </FlipElement>
  </div>
</template>

<style scoped>
.example {
  width: 100%;
}

.card {
  background-color: white;
  border-radius: 8px;
  width: 100px;
  height: 100px;
}

.card--expanded {
  border-radius: 200px;
  margin-left: 50%;
  height: 200px;
  width: 50%;
  background-color: red;
}
</style>

Common Configuration

The config prop controls the animation behavior:

interface FlipElementConfig {
  clone?: boolean // Whether to clone the element during flip
  flipStateVars?: Flip.FlipStateVars // GSAP Flip state variables
  flipVars?: Flip.FromToVars // GSAP Flip animation variables
}

interface FlipElementConfig {
  clone?: boolean // Whether to clone the element during flip
  flipStateVars?: Flip.FlipStateVars // GSAP Flip state variables
  flipVars?: Flip.FromToVars // GSAP Flip animation variables
}

For the flipStateVars check the gsap docs, for the FromToVars check the gsap docs

Trigger

The trigger prop is optional and enable you trigger a flip animation arbitrary, like in this example. An usage example is a ref that change a class and trigger the animation.

Next Steps

Now that you have the basics, explore:

• Flip Manager - Learn about the core API
• Router Integration - Add route-based animations