You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<div v-gsap.add.to="{ x: -300 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
46
46
<div v-gsap.add.withPrevious.to="{ x: 300 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
Copy file name to clipboardExpand all lines: docs/content/2.usage/3.modifiers.md
+90-36Lines changed: 90 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,8 @@ V-GSAP supports the above four main animation types.
10
10
-`.to` animates from the current state to a given to-state
11
11
-`.fromTo` combines both the above. It takes an Array of two states as value
12
12
-`.call` takes an arrow function as value and executes it
13
-
- when used with `.whenVisible.`, it will automatically be handled like `.once.`
13
+
- when used with `.whenVisible.`, it will automatically be handled like
14
+
`.once.`
14
15
15
16
---
16
17
@@ -19,45 +20,99 @@ V-GSAP supports the above four main animation types.
19
20
[See in Action](/playground#whenvisible)
20
21
21
22
- enables scrollTrigger. It defaults to from `top 90%` to `top 50%` and `scrub`
22
-
- you can overwrite these properties in the value Object. In combination with `.fromTo`, put the overrides in the second state
23
+
- you can overwrite these properties in the value Object. In combination with
24
+
`.fromTo`, put the overrides in the second state
23
25
24
26
### `.fromInvisible`
25
27
26
-
- Adds `opacity: 0` as initial state and includes `opacity: 1` in `.to` or `.fromTo`.
27
-
- This prevents the element from being visible until the directive takes action. Especially needed for above-the-fold animations
28
-
- With this modifier you can create entrance animations without always repeating the opacity hassle.
28
+
- Adds `opacity: 0` as initial state and includes `opacity: 1` in `.to` or
29
+
`.fromTo`.
30
+
- This prevents the element from being visible until the directive takes action.
31
+
Especially needed for above-the-fold animations
32
+
- With this modifier you can create entrance animations without always repeating
33
+
the opacity hassle.
29
34
30
35
### `.once`
31
36
32
-
Makes the animation play only once when scrolling down, and stay in its final state even when scrolling back up.
37
+
Makes the animation play only once when scrolling down, and stay in its final
38
+
state even when scrolling back up.
33
39
34
40
### `.once.reversible`
35
41
36
-
Similar to `.once` but will reverse the animation when scrolling back up, allowing it to play again when scrolling down.
37
-
38
-
::alert{type="info"}
39
-
This is the default previous behavior of `.once`.
40
-
::
42
+
Similar to `.once` but will reverse the animation when scrolling back up,
43
+
allowing it to play again when scrolling down.
41
44
45
+
::alert{type="info"} This is the default previous behavior of `.once`. ::
42
46
43
47
### `.markers`
44
48
45
49
Adds markers for debugging.
46
50
47
51
### Custom Scroller
48
52
49
-
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.
50
-
::alert{type="info"}
51
-
Note: You can also set this globally in the `nuxt.config.ts`[See details](/installation/configuration)
52
-
::
53
+
If your content is wrapped in an artificial scroll container, use
54
+
`{ [...], scroller: '<selector>' }` as a selector string inside the value object
55
+
to override the default scroll container. ::alert{type="info"} Note: You can
56
+
also set this globally in the `nuxt.config.ts`
57
+
[See details](/installation/configuration) ::
58
+
59
+
---
60
+
61
+
## `.onState-<key>-<value>`
62
+
63
+
The `.onState-` feature allows to play certain animations only when a
64
+
data-attribute has a certain value.
65
+
66
+
The modifier consists of 2 or 3 parts:
67
+
68
+
`.onState-<key>-<value>`
69
+
70
+
-`key`: refers to the data attribute that is used as source. Example: key
71
+
`test` would refer to `data-test=""`
72
+
-`value`: (optional) the target value to trigger the animation.
73
+
- If left out, the desired target value is `true`. This allows more readable
74
+
syntax like `.onState-open`
75
+
76
+
Example:
77
+
78
+
```typescript
79
+
<div
80
+
:data-index="someIndexVar"
81
+
v-gsap.onState-index-2.to="{ ... }"></div>
82
+
```
83
+
84
+
The above example code would run the animation when the `data-index` value is
85
+
`2`
86
+
87
+
This feature uses `MutationObserver` in the background that updates each time
88
+
the given data-attribute changes. If the current value equals the target value,
89
+
the animation is played. If the values don't match, the animation is reversed.
90
+
91
+
### .inherit
92
+
93
+
This is a submodifier for `.onState-` and allows the data-attribute to be on
94
+
some parent. This is useful if you want to update multiple child elements based
95
+
on some parent state.
96
+
97
+
In the background `el.closest()` is used to search for a parent that has the
0 commit comments