Modifiers

Discover all the different features of v-gsap.

.from, .to, .fromTo, .call

V-GSAP supports the above four main animation types.

• .from animates from a given state to its current state
• .to animates from the current state to a given to-state
• .fromTo combines both the above. It takes an Array of two states as value
• .call takes an arrow function as value and executes it
  • when used with .whenVisible., it will automatically be handled like .once.

.whenVisible

See in Action

• enables scrollTrigger. It defaults to from top 90% to top 50% and scrub
• you can overwrite these properties in the value Object. In combination with .fromTo, put the overrides in the second state

.fromInvisible

• Adds opacity: 0 as initial state and includes opacity: 1 in .to or .fromTo.
• This prevents the element from being visible until the directive takes action. Especially needed for above-the-fold animations
• With this modifier you can create entrance animations without always repeating the opacity hassle.

.once

Makes the animation play only once when scrolling down, and stay in its final state even when scrolling back up.

.once.reversible

Similar to .once but will reverse the animation when scrolling back up, allowing it to play again when scrolling down.

.markers

Adds markers for debugging.

Custom Scroller

If your content is wrapped in an artificial scroll container, use { [...], scroller: '<selector>' } as a selector string inside the value object to override the default scroll container.

.parallax

See in Action

• enables parallax effect for this element. Brings its own scrollTrigger, therefore doesn't need extra .whenVisible..
• Only works with a speed settings like:

.slower-<integer>

.faster-<integer>

Element scrolls slower or faster than the default scroll speed.

• The value is a multiplier of 10% element height. E.g. .slower-5 scrolls the element from +-50% to +-50% height.
• If the value is left out, default is 5. Meaning: .slower defaults to .slower-5 (same with faster)

.stagger

See in Action

enables stagger for immediate children if placed on the parent. Duration can be overwritten in the value object.

.infinitely

See in Action

This sets the repeat of the timeline to -1 to infinitely repeat the animation

.delay-<milliseconds>

See in Action

• can be added to delay the action for n milliseconds like .delay-500.
• any integer value will be accepted, like .delay-1234.

.whileHover

See in Action

lets you define a hover animation. By default, it reverses on leave.

.noReverse

can be used to disable the reversing on leave

.draggable

See in Action

Allows the element to be draggable

.x, .y, .rotation

allows to restrict the direction of the drag.

.bounds

restricts the container.

• If left empty (.draggable.bounds) it restricts the parent.
• A querySelector can be passed

v-gsap.draggable.bounds="'.someContainer'"

.animateText.

See in Action

Animates Text letter by letter

• It can either take a string as value like

v-gsap.animateText="'Das ist ein Text'"

• Or if no value is given, it takes the inner textContent from the element

<div v-gsap.animateText> Inner Text </div>

.slow, .fast

Changes the typing speed

.magnetic

See in Action

Makes an element be magnetically attracted to the cursor

.weak, .weaker, .stronger, .strong

Modifies the strength of attraction.

.refuse

Will make the element try to flee from the cursor

.mobile

.desktop

See in Action

With these you can specify the viewport on which the animation shall take place.

• Window resizing is handled automatically.
• Breakpoint is 768px
• You can combine both. Simply use both v-gsap.mobile. AND v-gsap.desktop. on the same element.

.preset

See in Action

You can define presets in nuxt.config.ts to make animations reusable.

See details

.entrance

This is similar to .preset, but focuses on predefined entrance animations. There are the following options out of the box:

• .slide-left
  • Slides and fades in from left
• .slide-right
  • Slides and fades in from right
• .slide-top
  • Slides and fades in from top
• .slide-bottom
  • Slides and fades in from bottom
• .fade
  • Simply fades in
• .scale
  • Fades and scales in from 75% size
• .scale-full
  • Fades and scales in from 0% size