feat: do not reinvoke gsap functions on window resize

StevenJPx2 · Dec 7, 2023 · 384a603 · 384a603
1 parent 6b7fa65
commit 384a603
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -53,7 +53,7 @@ const onAfterEnter = async () => {
     </div>
     <div
       :style="{
-        height: '100vh',
+        height: '200vh',
         display: 'grid',
         alignItems: 'center',
         fontFamily: 'sans-serif',

diff --git a/src/runtime/composables/use-animate-on-scroll/index.ts b/src/runtime/composables/use-animate-on-scroll/index.ts
@@ -25,7 +25,7 @@ export function useAnimateOnScroll(
   if (options.scrollAnimationOptions) {
     scrollAnimationOptions = {
       trigger: unrefEl,
-      start: "top bottom",
+      start: "top 80%",
     };
     if (options.scrollAnimationOptions instanceof Object) {
       scrollAnimationOptions = {

diff --git a/src/runtime/composables/use-gsap/index.ts b/src/runtime/composables/use-gsap/index.ts
@@ -1,17 +1,17 @@
 import {
   type MaybeRefOrGetter,
   watchPostEffect,
-  toValue,
   tryOnScopeDispose,
   createEventHook,
   tryOnMounted,
   shallowRef,
+  until,
 } from "#imports";
 import "gsap";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import type { Ease } from "../../types";
-import type { EventHookOn } from "@vueuse/core";
+import { invoke, type EventHookOn } from "@vueuse/core";
 import type { ShallowRef } from "vue";
 
 type EaseOption = {
@@ -38,8 +38,10 @@ const activationFn = (
   tween: gsap.core.Tween | undefined,
   updateFactory: (el: gsap.TweenTarget | undefined) => void,
 ) => {
-  const updateFn = () => updateFactory(toValue(el));
-  watchPostEffect(updateFn);
+  invoke(async () => {
+    const val = await until(el).toMatch((v) => v !== undefined);
+    updateFactory(val);
+  });
 
   tryOnScopeDispose(() => tween?.kill());
 };