diff --git a/playground/app.vue b/playground/app.vue
index 370be4e..380e339 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -131,19 +131,7 @@ const onAfterEnterBendy = async () => {
}"
>
(v: T) =>
+ Object.fromEntries(
+ v.map((val) => {
+ const [key, value] = val.split(":");
+ return [key, value === undefined ? true : value];
+ }),
+ ) as {
+ [P in T[number] as P extends `${infer K}:${string}`
+ ? K
+ : P]: P extends `${string}:${infer V}` ? V : true;
+ };
export default defineNuxtPlugin((nuxt) => {
const app = nuxt.vueApp;
- for (const key in nuggetBakedPresets) {
- const typedKey = key as keyof AnimationOptions;
- nuggetBakedPresets;
+ app.directive("text-animate", vTextAnimate);
+
+ app.directive(
+ "text-animate-baked",
+ {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedSplitTextAnimation(el, binding.value);
+ },
+ },
+ );
+
+ for (const splitBy of ["lines", "words", "chars"] as const) {
+ app.directive(
+ `text-animate-baked-${splitBy}`,
+ {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedSplitTextAnimation(el, {
+ splitBy,
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+ },
+ );
}
- app.directive("yo", (el, binding) => {});
+ app.directive("aos", vAos);
+
+ app.directive("aos-baked", {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedAnimateOnScroll(el, binding.value);
+ },
+ });
+
+ app.directive("aos-baked-animate", {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedAnimateOnScroll(el, {
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+ });
+
+ app.directive("from-to", vFromTo);
+
+ app.directive("from-to-baked", {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedFromTo(el, binding.value);
+ },
+ });
- nuxt.vueApp.directive("text-animate", vTextAnimate);
- nuxt.vueApp.directive("aos", vAos);
- nuxt.vueApp.directive("from-to", vFromTo);
+ app.directive("from-to-baked-animate", {
+ [directiveHooks.mounted]: (el, binding) => {
+ useBakedFromTo(el, {
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+ });
});
diff --git a/src/runtime/functions/use-gsap/index.ts b/src/runtime/functions/use-gsap/index.ts
index fd22bb6..5ce9e1c 100644
--- a/src/runtime/functions/use-gsap/index.ts
+++ b/src/runtime/functions/use-gsap/index.ts
@@ -99,3 +99,4 @@ export function useGsap(plugins: object[] = [ScrollTrigger]) {
export type UseGsapReturn = ReturnType;
export * from "./baked";
+export * from "./directive";
diff --git a/src/runtime/functions/use-split-text-animation/index.ts b/src/runtime/functions/use-split-text-animation/index.ts
index 006f9a4..a3649ff 100644
--- a/src/runtime/functions/use-split-text-animation/index.ts
+++ b/src/runtime/functions/use-split-text-animation/index.ts
@@ -2,8 +2,8 @@ import type { MaybeComputedElementRef } from "@vueuse/core";
import { useSplitText } from "#imports";
import type { Simplify } from "../../types";
import {
- useAnimateOnScroll,
type UseAnimateOnScrollOptions,
+ useAnimateOnScroll,
} from "../use-animate-on-scroll";
export type PartialSplitTextAnimationOptions = {
@@ -58,3 +58,4 @@ export function useSplitTextAnimation(
}
export * from "./baked";
+export * from "./directive";