Examples

Here you'll find some use-cases and examples.
See it in action

<div v-gsap.whenVisible.from="{ opacity: 0, x: -32 }"></div>

<div
  v-gsap.whenVisible.from="{
    opacity: 0,
    start: 'top 50%',
    end: 'bottom 50%',
  }"
></div>

<div v-gsap.whenVisible.once.from="{ opacity: 0, x: -32 }"></div>

<div v-gsap.entrance.slide-left></div>

There are multiple presets for entrace See details

<div v-gsap.markers.whenVisible.from="{ opacity: 0, x: -32 }"></div>

Magnetic

<button v-gsap.magnetic></button>

<button v-gsap.magnetic.strong></button>

<ul v-gsap.whenVisible.stagger>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

<div v-gsap.whenVisible.animateText>Lorem Ipsum...</div>

<div v-gsap.whenVisible.animateText="'Lorem Ipsum...'"></div>

<div v-gsap.whenVisible.animateText.slow>Lorem Ipsum...</div>

<div v-gsap.parallax.slower>Lorem Ipsum...</div>

<div v-gsap.parallax.faster-5>Lorem Ipsum...</div>

<div v-gsap.whileHover.to="{ scale: 1.1 }"></div>

<div v-gsap.whileHover.noReverse.to="{ scale: 1.1 }"></div>

<div v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"></div>

<div
  v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"
  v-gsap.mobile.infinitely.to="{ rotate: '-90deg' }"
></div>

<div v-gsap.draggable></div>

<div v-gsap.draggable.bounds="'body'"></div>

<div v-gsap.draggable.x></div>

<div v-gsap.draggable.y.bounds="'body'"></div>

<div v-gsap.draggable.rotation></div>