feat(useGenericTransition): add composable for generic from-to transi…

…tions

playground/app.vue

@@ -10,6 +10,8 @@ const { play, stop } = useBakedTransition({
  parentContainer: stingEffectContainer,
  animationOptions: {
  translate: true,
+ scale: "in",
+ skew: "bottom",
  },
 });
 
@@ -24,7 +26,7 @@ const onAfterEnter = async () => {
 <template>
  <smooth-scroll>
  <button
- class="bg-yellow-500 grid place-content-center relative px-8 py-5 overflow-hidden"
+ class="bg-yellow-500 rounded-md grid place-content-center relative px-8 py-5 overflow-hidden"
  @mouseover="
  stop();
  play();
@@ -36,7 +38,7 @@ const onAfterEnter = async () => {
  >
  <div
  ref="stingEffectContainer"
- class="rounded-sm bg-red-500 pointer-events-none absolute inset-[5%]"
+ class="rounded-lg bg-red-500 pointer-events-none absolute inset-0 border-4 border-yellow-500"
  />
  <span class="inline-block text-white z-[1] pointer-events-none">
  hover over me!

src/runtime/composables/transitions/baked.ts

@@ -1,13 +1,11 @@
-import { watch, unref, unrefElement, toRef, tryOnMounted } from "#imports";
-import { useGsap, type StrongTweenVars } from "../use-gsap";
 import type { Simplify } from "../../types";
 import {
- useConstructTransition,
  type TransitionOutput,
  type UseConstructTransitionOptions,
 } from "./construct";
 import type { AnimationOptions } from "../baked/types";
 import { generateAnimationTweens } from "../baked/utils";
+import { useGenericTransition } from "./generic";
 
 export type UseBakedTransitionOptions = Simplify<
  {
@@ -22,41 +20,15 @@ export function useBakedTransition(
  const {
  animationOptions,
  direction = "bottom",
- parentContainer,
  ...constructOptions
  } = options;
- const container = toRef(parentContainer);
- const { set } = useGsap();
- const { enterTl, leaveTl, ...output } = useConstructTransition({
- parentContainer,
+ const { from, to } = generateAnimationTweens(animationOptions);
+ const output = useGenericTransition({
+  from: { ...from, duration: 0.4, ease: "power2" },
+ to: { ...to, duration: 0.6, ease: "expo.out" },
  direction,
  ...constructOptions,
  });
- const { from, to } = generateAnimationTweens(animationOptions);
- tryOnMounted(() => {
- set(container, from);
- });
-
- watch(
- () => [unrefElement(container), unref(enterTl), unref(leaveTl)] as const,
- ([parent, eTl, lTl]) => {
- if (!parent || !eTl || !lTl) return;
- const toModified: StrongTweenVars = {
- ...to,
- ease: "expo.out",
- scrollTrigger: undefined,
- };
-
- eTl.fromTo(parent, from, toModified);
-
- lTl.fromTo(parent, toModified, {
- ...from,
- duration: 0.4,
- ease: "power2",
- });
- },
- { immediate: true, flush: "post" },
- );
 
  return output;
 }

src/runtime/composables/transitions/generic.ts

@@ -0,0 +1,44 @@
+import { toRef, tryOnMounted, unref, unrefElement, watch } from "#imports";
+import type { Simplify } from "../../types";
+import { type StrongTweenVars, useGsap } from "../use-gsap";
+import {
+ useConstructTransition,
+ type TransitionOutput,
+ type UseConstructTransitionOptions,
+} from "./construct";
+
+export type UseGenericTransitionOptions = Simplify<
+ { from: StrongTweenVars; to: StrongTweenVars } & UseConstructTransitionOptions
+>;
+/**
+ * Composable to create generic transitions
+ */
+export function useGenericTransition(
+ options: UseGenericTransitionOptions,
+): TransitionOutput {
+ const { from, to, ...constructOptions } = options;
+ const container = toRef(constructOptions.parentContainer);
+
+ const { set } = useGsap();
+
+ const { enterTl, leaveTl, ...output } =
+ useConstructTransition(constructOptions);
+
+ tryOnMounted(() => {
+ set(container, from);
+ });
+
+ watch(
+ () => [unrefElement(container), unref(enterTl), unref(leaveTl)] as const,
+ ([parent, eTl, lTl]) => {
+ if (!parent || !eTl || !lTl) return;
+
+ eTl.fromTo(parent, from, to);
+
+ lTl.fromTo(parent, to, from);
+ },
+ { immediate: true, flush: "post" },
+ );
+
+ return output;
+}

src/runtime/composables/transitions/index.ts

@@ -2,3 +2,4 @@ export { useBendyWendyTransition } from "./bendy-wendy";
 export { useOffsetTransition } from "./offset";
 export { useConstructTransition } from "./construct";
 export { useBakedTransition } from "./baked";
+export { useGenericTransition } from "./generic";

src/runtime/composables/use-gsap/index.ts

@@ -33,7 +33,8 @@ const activationFn = (
  tryOnScopeDispose(() => tween.value?.kill());
 };
 
-/** Composable to use gsap
+/**
+ * Composable to use gsap
  * @param plugins - The plugins to register to gsap
  * @remarks
  * - This is a composable to make it easier to use gsap with Vue