Déjà Vue

Appearance

Tween Component ​

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

Basic Tween ​

html
<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.

Revert on dispose ​

By default, clearing or unmounting a Tween kills its GSAP context — animations stop but inline styles may remain. Set revert-on-dispose when you want DOM state restored (for example after v-if teardown or when tween vars change and the tween recomposes). Nested Timeline instances use the same prop on unmount only.

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:

html
<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.

Note: from-only tweens used with scrollTrigger can occasionally leave start values applied after ScrollTrigger refreshes (for example on layout/resize). If you encounter persistent or "stuck" styles, implement the animation as fromTo and put scrollTrigger on the to vars.

Default slot ​

animation, direction, parent, progress.

html
<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 ​

html
<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>