Tween Component

The Tween component composes one GSAP tween from from, to, or effect props.

Basic Tween

<script setup>
import { Tween } from 'deja-vue'
</script>

<template>
  <Tween :to="{ x: 56 }">
    <div class="target" />
  </Tween>
</template>

Animation target

Slotted elements are the default target. See Animation targets for is, tween-target, and seamless.

Tween kinds

Use :to, :from, both for fromTo, or effect + effect-options. One kind per Tween. Key the component when switching kind at runtime — see Troubleshooting:

<script setup>
import { ref } from 'vue'

import { Tween } from 'deja-vue'

const mode = ref<'to' | 'fromTo'>('to')
</script>

<template>
  <Tween
    :key="mode"
    v-bind="mode === 'fromTo'
      ? { from: { opacity: 0 }, to: { opacity: 1 } }
      : { to: { opacity: 1 } }"
  >
    <div class="target" />
  </Tween>
</template>

Props, events, and slot

Full prop and event reference: Components API — Tween.

Scroll-linked tweens: put scrollTrigger in from / to vars — Animation targets — ScrollTrigger.

Default slot

animation, direction, parent, progress.

<script setup>
import { Tween } from 'deja-vue'
</script>

<template>
  <Tween
    :to="{ x: 56 }"
    v-slot="{ progress }"
  >
    <div class="target">
      {{ ~~(progress * 100) }}%
    </div>
  </Tween>
</template>

Events

(animation, parent) — start, update, complete, repeat, reverseComplete, interrupt.

Instance access

See Component instance types when you need script-side access. For playback, use Animation controls — Trigger.

Examples

<script setup>
import { Tween } from 'deja-vue'
</script>

<template>
  <Tween :from="{ opacity: 0, y: 56, stagger: 0.1 }">
    <div
      v-for="n in 3"
      :key="n"
      class="target"
    />
  </Tween>
</template>