v1.0.0-beta.0

✨ Highlights

Whew! This is a BIG release and was a long time coming. Let's see what we done here.

Simplified directives for baked presets

Say you want to animate lines in a text block by moving it from the bottom, while fading it from 0 to 100% opacity.

Before you would have to do this:

<div
  v-text-animate="{
    baked: true,
    options: {
      splitBy: 'lines',
      animationOptions: { translate: true, opacity: true },
    },
  }"
/>

Now:

<div
  v-text-animate-baked="{
    splitBy: 'lines',
    animationOptions: { translate: true, opacity: true },
  }"
/>

Or even:

<div v-text-animate-baked-lines="['translate', 'opacity']" />

You can define specific tweens by using ::

<div v-text-animate-baked-lines="['translate', 'opacity:in']" />

Custom baked presets

You can define your own presets that you can use with all of the baked enabled composables/directives/components.

The below example allows you to define your own animation called zoom with different tweens. Calling zoom as true in any of your baked animations will make it automatically go for the in tween.

defineNuxtConfig({
  // ...
  nugget: {
    baked: {
      custom: {
        zoom: {
          tweens: {
            in: {
              scale: ["100%", "110%"],
            },
            out: {
              scale: ["110%", "100%"],
            },
          },
          defaultTween: "in",
        },
      },
    },
  },
});

You can also override all the default presets by doing the following:

defineNuxtConfig({
  // ...
  nugget: {
    baked: {
      defaults: {},
    },
  },
});

createInfiniteMarquee

Previously, <InfiniteMarquee /> was a separate component, and that didn't sit right with me. I couldn't be created as a hook, because there would be too many refs to setup, hence I created a function that would return a headless component that can be used anywhere. This incidentally also fixed a lot of previously unnoticed bugs, and made the API simpler.

Example:

<script setup lang="ts">
const Marquee = createInfiniteMarquee(props);
</script>

<template>
  <Marquee>
    <div class="flex">
      <p v-for="i in 10" :key="i">WHO I AM</p>
    </div>
  </Marquee>
</template>

It is still recommended to use the component as it removes the need for calling the function.

Fix type safety issues

Unbeknownst to me, the types would not map 1:1 to what I was getting in development. After finding the root cause for the broken types, now all the types should be working correctly.

This was a lot of fun, but a LOT of work. Hope all of you have fun with this! 🎉

compare changes

🚀 Enhancements

• ⚠️ Revitalize baked format (39b5220)
• Finish new baked format (b65c469)
• Finish custom bakes in config (#2)
• createInfiniteMarquee: Create composable (804411a)
• directives: Add new directives (#6)

🩹 Fixes

• useLocomotive: Have locomotive scroll in wrapper than in window (2d72538)
• useLocomotive, useInfiniteMarquee: Locomotive types, infinite marquee implies child (52c7fdb)

💅 Refactors

• More typesafety, multiple build type fixes (b290a91)

📖 Documentation

• Update path (91fceb5)
• roadmap: Update roadmap (bdcf1f8)
• directives: Reorganize directives and update docs (8964563)

🏡 Chore

• release: V0.3.1 (7dd4a4b)
• Create FUNDING.yml (73d35c5)
• Update issue templates (4696542)
• baked: Types (e84a397)

⚠️ Breaking Changes

• ⚠️ Revitalize baked format (39b5220)

❤️ Contributors

• Steven John (@StevenJPx2)