Merge pull request #6 from davidparys/added-oneshot

- Updated `.once` and added `.oneshot` modifier descriptions in the modifiers documentation.

Author: holux-design

docs/content/2.usage/3.modifiers.md

@@ -29,7 +29,16 @@ V-GSAP supports the above four main animation types.
 
 ### `.once`
 
-allows to run the scrollTrigger only 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`
 

docs/pages/playground.vue

@@ -233,6 +233,30 @@
         >
           <DemoComponent v-gsap.whenVisible.from="{ autoAlpha: 0, x: -50 }" />
         </BoxComponent>
+        <BoxComponent
+          code="v-gsap.whenVisible.once.from='{ autoAlpha: 0, rotate: -45, duration: 2 }'"
+          title="Once (stays in final state)"
+        >
+          <DemoComponent
+            v-gsap.whenVisible.once.from="{
+              autoAlpha: 0,
+              rotate: -45,
+              duration: 2
+            }"
+          />
+        </BoxComponent>
+        <BoxComponent
+          code="v-gsap.whenVisible.once.reversible.from='{ autoAlpha: 0, rotate: -45, duration: 2 }'"
+          title="Once Reversible (old behavior)"
+        >
+          <DemoComponent
+            v-gsap.whenVisible.once.reversible.from="{
+              autoAlpha: 0,
+              rotate: -45,
+              duration: 2
+            }"
+          />
+        </BoxComponent>
         <BoxComponent
           code="v-gsap.whenVisible.from='{ autoAlpha: 0, start: 'top 60%', end: 'bottom 40%' }'"
           title="Custom start/end"
@@ -337,8 +361,8 @@
       </div>
       <div class="Grid">
         <BoxComponent
-          v-gsap.whenVisible.stagger.from="{ opacity: 0 }"
-          code="v-gsap.whenVisible.stagger.from='{ opacity: 0 }'"
+          v-gsap.whenVisible.stagger.from="{ opacity: 0, y: 50, stagger: 0.4 }"
+          code="v-gsap.whenVisible.stagger.from='{ opacity: 0, y: 50, stagger: 0.4 }'"
           title="Default"
         >
           <DemoComponent />
@@ -635,4 +659,4 @@ section {
     @apply md:grid-cols-2 lg:grid-cols-3;
   }
 }
-</style>
+</style>

src/runtime/plugin.ts

@@ -50,7 +50,7 @@ export const vGsapDirective = (
 
   beforeMount(el, binding, vnode) {
     if (appType == 'vue') el.dataset.gsapId = uuidv4()
-    if (!gsapContext) gsapContext = gsap.context(() => {})
+    if (!gsapContext) gsapContext = gsap.context(() => { })
 
     binding = loadPreset(binding, configOptions)
 
@@ -133,15 +133,15 @@ function assignChildrenOrderAttributesFor(vnode, startOrder?): number {
     return []
   }
 
-  ;(getChildren(vnode) || [])?.forEach((child: any) => {
-    ;(child?.dirs ? Array.from(child?.dirs) : [])?.forEach((dir: any) => {
-      if (dir.modifiers.timeline) return
+    ; (getChildren(vnode) || [])?.forEach((child: any) => {
+      ; (child?.dirs ? Array.from(child?.dirs) : [])?.forEach((dir: any) => {
+        if (dir.modifiers.timeline) return
 
-      dir.modifiers[`suggestedOrder-${order}`] = true
-      order++
+        dir.modifiers[`suggestedOrder-${order}`] = true
+        order++
+      })
+      order = assignChildrenOrderAttributesFor(child, order)
     })
-    order = assignChildrenOrderAttributesFor(child, order)
-  })
   return order
 }
 
@@ -175,7 +175,11 @@ function prepareTimeline(el, binding, configOptions) {
       scrub,
       ...callbacks,
       markers,
-      toggleActions: once ? 'play none none reverse' : undefined,
+      toggleActions: binding.modifiers.once
+        ? binding.modifiers.reversible
+          ? 'play none none reverse'
+          : 'play none none none'
+        : undefined,
     }
   }
 
@@ -284,9 +288,9 @@ function prepareTimeline(el, binding, configOptions) {
     }
     const speed
       = speeds[
-        Object.keys(binding.modifiers).find(modifier =>
-          Object.keys(speeds).includes(modifier),
-        ) || ''
+      Object.keys(binding.modifiers).find(modifier =>
+        Object.keys(speeds).includes(modifier),
+      ) || ''
       ] || 2
     timeline.to(el, { text: { value, speed } })
   }
@@ -425,4 +429,4 @@ function getValueFromModifier(binding, term: string) {
   return Object.keys(binding.modifiers)
     ?.find(m => m.toLowerCase().includes(term.toLowerCase()))
     ?.split('-')?.[1]
-}
+}