feat!: change baked locations, add baked option to directive

- Baked is moved from baked/ to their parent composable
- Directives for each composable are in their parent directories
- Added docs

playground/app.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { vSplitAnimate } from "../src/runtime/directives";
-import { ref } from "#imports";
+import { vSplitAnimate } from "../src/runtime/composables/directives";
+import { ref, useBakedTransition } from "#imports";
 import { promiseTimeout } from "@vueuse/core";
-import { useBakedTransition } from "../src/runtime/composables/transitions";
 
 const stingEffectContainer = ref<HTMLDivElement | null>(null);
 
@@ -92,12 +91,15 @@ const onAfterEnter = async () => {
  >
  <h1
  v-split-animate="{
- splitBy: 'lines',
- animationOptions: { translate: true },
- splitOptions: {
- wrapping: {
- select: 'lines',
- wrapClass: 'inline-block overflow-hidden',
+ baked: true,
+ options: {
+ splitBy: 'lines',
+ animationOptions: { translate: true },
+ splitOptions: {
+ wrapping: {
+ select: 'lines',
+ wrapClass: 'inline-block overflow-hidden',
+ },
  },
  },
  }"

src/runtime/composables/README.md

@@ -0,0 +1,26 @@
+# Composables
+
+## Low-level
+
+- [`useGsap`](./use-gsap): Exposes [gsap][gsap-href] functions. This is internally used in all the other animation composables.
+- [`useLocomotive`](./use-locomotive): Exposes [Locomotive Scroll][locomotive-href] for smooth scroll and parallax effects. Use `<SmoothScroll />` for CSS styles.
+- [`useConstructTransition`](./transitions): Used for creating transitions.
+
+## Mid-level
+
+- [`useAnimateOnScroll`](./use-animate-on-scroll)
+- [`useSplitTextAnimation`](./use-split-text-animation)
+
+## High-level
+
+- [**Baked** animations](./baked): Define stackable, premium animations. All mid-level composables have a baked version.
+ - `useBakedAnimation`: Exposes a `fromTo` tween with baked settings.
+ - `useBakedAnimateOnScroll`: Runs baked animations on scroll. Scroll settings are automatically determined if not explicitly set.
+ - `useBakedSplitTextAnimation`: Runs `useSplitTextAnimation` with baked presets.
+- [Transitions](./transitions): Composables for kickass transitions that can be used for anything.
+
+ - `useBendyWendy`
+ - `useOffset`
+
+[gsap-href]: https://gsap.com/
+[locomotive-href]: https://github.com/locomotivemtl/locomotive-scroll/tree/v5-beta

src/runtime/composables/baked/README.md

@@ -1,22 +1,12 @@
 # 'Baked' animations
 
-This is a suite of composables to use **opinionated**, **premium** animations with just adding keys to them.
+This is a suite of utilities to use **opinionated**, **premium** animations with just adding keys to them.
 
-## Directory structure
+## Preset animations
 
-```
-baked/
-├─ animate.ts
-├─ index.ts
-├─ on-scroll.ts
-├─ split-text.ts
-├─ types.ts
-├─ utils.ts
-```
-
-- `animate.ts` - exports `useBakedAnimation`. This will allow you to animate any element with the `fromTo` function from `useGsap`.
-- `index.ts` - exports all the composables.
-- `on-scroll.ts` - [`useAnimateOnScroll`](../useAnimateOnScroll.ts) but with the baked animation options.
-- `split-text.ts` - [`useSplitTextAnimation`](../useSplitTextAnimation.ts) but with the baked animation options.
-- `types.ts` - common types used by composables
-- `utils.ts` - common utility functions used by composables
+- Opacity
+- Translate
+- Skew
+- Scale
+- Rotate
+- Blur

src/runtime/composables/baked/directive.ts

@@ -0,0 +1,21 @@
+import { directiveHooks } from "@vueuse/core";
+import type { ObjectDirective } from "nuxt/dist/app/compat/capi";
+
+export type DirectiveOptions<O, BO> =
+ | { baked: true; options: BO }
+ | { baked?: false; options: O };
+
+export const defineDirective = <O, BO>({
+ fn,
+ bakedFn,
+}: {
+ fn: (el: HTMLElement, options: O) => void;
+ bakedFn: (el: HTMLElement, options: BO) => void;
+}): ObjectDirective<HTMLElement, DirectiveOptions<O, BO>> => {
+ return {
+ [directiveHooks.mounted]: (el, binding) => {
+ if (!binding.value?.baked) return fn(el, binding.value.options);
+ bakedFn(el, binding.value.options);
+ },
+ };
+};

src/runtime/composables/baked/presets.ts

@@ -0,0 +1,98 @@
+import "gsap";
+import type { AnimationOptions } from "./types";
+
+type RequiredAnimationOptions = Required<AnimationOptions>;
+const defineTween = <
+ Obj extends Record<string, { from: gsap.TweenVars; to: gsap.TweenVars }>,
+ T extends Exclude<keyof Obj, "DEFAULT">,
+>(
+ x: Obj,
+ defaultTween: T,
+) => ({ ...x, DEFAULT: defaultTween });
+
+export const presetTweens = {
+ opacity: defineTween(
+ {
+ in: { from: { autoAlpha: 0 }, to: { autoAlpha: 1 } },
+ out: { from: { autoAlpha: 1 }, to: { autoAlpha: 0 } },
+ },
+ "in",
+ ),
+ translate: defineTween(
+ {
+ bottom: {
+ from: { y: "200%" },
+ to: {
+ y: 0,
+ scrollTrigger: {
+ start: "top-=100% center",
+ end: "bottom center",
+ },
+ },
+ },
+ top: {
+ from: {
+ y: "-200%",
+ },
+ to: {
+ y: 0,
+ scrollTrigger: {
+ start: "top+=50% center",
+ end: "bottom center",
+ },
+ },
+ },
+ left: { from: { x: "-200%" }, to: { x: 0 } },
+ right: { from: { x: "200%" }, to: { x: 0 } },
+ },
+ "bottom",
+ ),
+ skew: defineTween(
+ {
+ bottom: { from: { skewY: 10 }, to: { skewY: 0 } },
+ top: { from: { skewY: -10 }, to: { skewY: 0 } },
+ left: { from: { skewX: -10 }, to: { skewX: 0 } },
+ right: { from: { skewX: 10 }, to: { skewX: 0 } },
+ },
+ "bottom",
+ ),
+ scale: defineTween(
+ {
+ in: { from: { scale: 0 }, to: { scale: 1 } },
+ out: { from: { scale: 1 }, to: { scale: 0 } },
+ },
+ "in",
+ ),
+ rotate: defineTween(
+ {
+ left: {
+ from: { rotation: 15, transformOrigin: "top left" },
+ to: { rotation: 0 },
+ },
+ right: {
+ from: { rotation: -15, transformOrigin: "top right" },
+ to: { rotation: 0 },
+ },
+ },
+ "left",
+ ),
+ blur: defineTween(
+ {
+ in: { from: { filter: "blur(10px)" }, to: { filter: "blur(0px)" } },
+ out: { from: { filter: "blur(0px)" }, to: { filter: "blur(10px)" } },
+ },
+ "in",
+ ),
+} satisfies {
+ [K in keyof RequiredAnimationOptions]: {
+ [P in RequiredAnimationOptions[K] as Exclude<
+ RequiredAnimationOptions[K],
+ true
+ >]: {
+ from: gsap.TweenVars;
+ to: gsap.TweenVars;
+ };
+ } & {
+ DEFAULT: Exclude<RequiredAnimationOptions[K], true>;
+ };
+};

src/runtime/composables/baked/types.ts

@@ -1,12 +1,5 @@
 import type { Direction } from "../../types";
-
-const defineTween = <
- Obj extends Record<string, { from: gsap.TweenVars; to: gsap.TweenVars }>,
- T extends Exclude<keyof Obj, "DEFAULT">,
->(
- x: Obj,
- defaultTween: T,
-) => ({ ...x, DEFAULT: defaultTween });
+import type { StrongTweenVars } from "../use-gsap";
 
 export type AnimationOptions = {
  /** Animation opacity
@@ -57,91 +50,16 @@ export type AnimationOptions = {
  blur?: "in" | "out" | true;
 };
 
-type RequiredAnimationOptions = Required<AnimationOptions>;
-
-export const presetTweens = {
- opacity: defineTween(
- {
- in: { from: { autoAlpha: 0 }, to: { autoAlpha: 1 } },
- out: { from: { autoAlpha: 1 }, to: { autoAlpha: 0 } },
- },
- "in",
- ),
- translate: defineTween(
- {
- bottom: {
- from: { y: "200%" },
- to: {
- y: 0,
- scrollTrigger: {
- start: "top-=100% center",
- end: "bottom center",
- },
- },
- },
- top: {
- from: {
- y: "-200%",
- },
- to: {
- y: 0,
- scrollTrigger: {
- start: "top+=50% center",
- end: "bottom center",
- },
- },
- },
- left: { from: { x: "-200%" }, to: { x: 0 } },
- right: { from: { x: "200%" }, to: { x: 0 } },
- },
- "bottom",
- ),
- skew: defineTween(
- {
- bottom: { from: { skewY: 10 }, to: { skewY: 0 } },
- top: { from: { skewY: -10 }, to: { skewY: 0 } },
- left: { from: { skewX: -10 }, to: { skewX: 0 } },
- right: { from: { skewX: 10 }, to: { skewX: 0 } },
- },
- "bottom",
- ),
- scale: defineTween(
- {
- in: { from: { scale: 0 }, to: { scale: 1 } },
- out: { from: { scale: 1 }, to: { scale: 0 } },
- },
- "in",
- ),
- rotate: defineTween(
- {
- left: {
- from: { rotation: 15, transformOrigin: "top left" },
- to: { rotation: 0 },
- },
- right: {
- from: { rotation: -15, transformOrigin: "top right" },
- to: { rotation: 0 },
- },
- },
- "left",
- ),
- blur: defineTween(
- {
- in: { from: { filter: "blur(10px)" }, to: { filter: "blur(0px)" } },
- out: { from: { filter: "blur(0px)" }, to: { filter: "blur(10px)" } },
- },
- "in",
- ),
-} satisfies {
- [K in keyof RequiredAnimationOptions]: {
- [P in RequiredAnimationOptions[K] as Exclude<
- RequiredAnimationOptions[K],
- true
- >]: {
- from: gsap.TweenVars;
- to: gsap.TweenVars;
- };
- } & {
- DEFAULT: Exclude<RequiredAnimationOptions[K], true>;
- };
+/** Options for the animation
+ * @remarks
+ * Uses `gsap.TweenVars` as a base type for the animation options
+ * @see {@link https://greensock.com/docs/v3/GSAP/gsap.to()}
+ * */
+export type UseBakedAnimationOptions = {
+ /** Options for the animation */
+ animationOptions: AnimationOptions;
+ /** Tween values for `gsap.to()`
+ * @remarks `ease` is strongly typed
+ * */
+ tweenValues?: StrongTweenVars;
 };

src/runtime/composables/baked/utils.ts

@@ -1,5 +1,6 @@
 import type { StrongTweenVars } from "../use-gsap";
-import { presetTweens, type AnimationOptions } from "./types";
+import { presetTweens } from "./presets";
+import { type AnimationOptions } from "./types";
 
 /** Generates the baked animation tweens
  * @param animationOptions - The animation options
@@ -35,3 +36,5 @@ export function generateAnimationTweens(animationOptions: AnimationOptions): {
 
  return tweens;
 }
+
+export * from "./types";

src/runtime/composables/directives.ts

@@ -0,0 +1,3 @@
+export { vAos } from "./use-animate-on-scroll/directive";
+export { vSplitAnimate } from "./use-split-text-animation/directive";
+export { vFromTo } from "./use-gsap/directive";

src/runtime/composables/index.ts

@@ -1,4 +1,3 @@
-export * from "./baked";
 export * from "./transitions";
 export * from "./use-gsap";
 export * from "./use-animate-on-scroll";