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.

::alert{type="info"} This is the default previous behavior of .once. ::

.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. ::alert{type="info"} Note: You can also set this globally in the nuxt.config.tsSee details ::

.onState-<key>-<value>

The .onState- feature allows to play certain animations only when a data-attribute has a certain value.

The modifier consists of 2 or 3 parts:

.onState-<key>-<value>

• key: refers to the data attribute that is used as source. Example: key test would refer to data-test=""
• value: (optional) the target value to trigger the animation.
  • If left out, the desired target value is true. This allows more readable syntax like .onState-open

Example:

<div
  :data-index="someIndexVar"
  v-gsap.onState-index-2.to="{ ... }"></div>

The above example code would run the animation when the data-index value is 2

This feature uses MutationObserver in the background that updates each time the given data-attribute changes. If the current value equals the target value, the animation is played. If the values don't match, the animation is reversed.

.inherit

This is a submodifier for .onState- and allows the data-attribute to be on some parent. This is useful if you want to update multiple child elements based on some parent state.

In the background el.closest() is used to search for a parent that has the matching data-attribute.

Simple example:

<div :data-index="someIndexVar">
  <div v-gsap.onState-index-2.inherit.to="{ ... }"></div>
</div>

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

::callout{type="warning"} #summary Note: Only works with whenVisible if used with once

#content Since whenVisible is specifically timed via start and end, a delay only squeezes the actual animation towards end.

With .whenVisible.once, the animation is no longer "timed" but "triggered", therefore .delay- makes sense again ::

.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. ::alert{type="info"} Order: weak <- weaker <- default (none) -> stronger -> strong ::

.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