Changelog

For the full changelog, see the GitHub releases.

0.3.3

• New completeOnTabHidden prop that jumps running animations to their end when the browser tab is hidden. See Finish animations when the tab is hidden. AnimeTransitionAnimeTransitionGroupAnimeLayoutGroup
• AnimeLayoutGroup items return to their normal place after two deps changes in one update, instead of staying pinned until the group remounts.

0.3.2

• New reducedMotion module option that makes animations jump to their end state for visitors who ask for less motion. See Accessibility.
• AnimeTransitionGroup takes deps and shallow, so it measures its layout only when items are added, removed or reordered, or when a deps value changes.
• useSplitText keeps its split when a parent re-render passes the same parameters as a new object.
• The CSS that the transition components and layout groups rely on no longer loads on every page. It ships with the code that uses it: the three components and useAnimeLayout.
• Importing from #nanime/composables now adds the same code as auto-imports. Before, it also kept the top-level code of composables you don't use.
• The performance guide and the AnimeLayoutGroup page explain when to pass deps to AnimeTransitionGroup and AnimeLayoutGroup.

0.3.1

• Fixes the Tailwind CSS v3 build error introduced in 0.3.0.
• Selector lists in elements, such as ".card, .card h3", no longer log a warning in AnimeLayoutGroup.

0.3.0

• useAnimeScroll takes a parameters object instead of a ref or getter. Pass template refs as target and container directly, and refs for enter, leave, repeat and axis update the observer without rebuilding it.
• After a leave, the styles it animated are removed, so a v-show or KeepAlive element comes back in its normal place. An enter with only an end value, such as { opacity: 1 }, now starts from the element's own style. Give it a start value: { opacity: [0, 1] }. AnimeTransitionAnimeTransitionGroup
• patch() on a useAnimeLayout returns Promise<void> instead of the timeline. await layout.patch(...) still resolves when the animation finishes. Read the timeline from layout.timeline.
• TypeScript rejects duration, delay and ease in the animation options of useScrambleText, where AnimeJS ignored them. Put them in the scramble options.
• New AnimeLayoutGroup component that animates its children to their new position and size when deps change.
• Default props for nanime components, set in app.config.ts or for part of the app. See component defaults.
• New html option in useSplitText for text that changes. See render changing text with v-once.
• AutoLayoutParams, LayoutAnimationParams, AnimeScrollParams, AnimeScrollTarget and ScrambleAnimationParams are exported from #nanime/types.
• Changing a field of a reactive() parameters object, such as params.x = 200, now rebuilds and restarts the animation, as it does for a ref or getter. If you change parameters often, pass keepTime: true to keep the playhead, or use useAnimatable for values that change every frame. useAnimateuseAnimeTimelineuseSplitTextuseScrambleTextuseAnimeScrolluseAnimeLayout
• Calling a method inside your component's onMounted, such as animation.seek(500) or layout.patch(update), now takes effect. The animation is created before your onMounted runs. useAnimateuseAnimatableuseAnimeLayout
• Calling sync() on a useAnimeTimeline with a useAnimate declared after it now syncs that animation.
• A useAnimeTimeline carries on when its parameters change. With keepTime, it keeps its playhead and stays playing or paused. With autoplay: useAnimeScroll(...), it keeps following the scroll.
• When the target, trigger or container ref of a useDraggable points to a new element, dragging moves to that element. A target that is null at mount no longer throws.
• A useDraggable stays disabled after disable() when it rebuilds.
• Snapping in useDraggable works when snap is a ref or a function that takes the draggable. A top-level snap still applies when you also pass an x or y object.
• When the target of a useAnimatable changes, the old element goes back to its original styles.
• Animations added with link() stay linked when the parameters of a useAnimeScroll change.
• When the target of a useSplitText becomes null, the original text comes back and lines, words and chars are emptied.
• Items in AnimeTransitionGroup with a CSS transition no longer animate twice after a move.
• Elements keep their shape while a layout animates. A box with padding keeps its size, one-line text stays on one line, inline text keeps its line height, and an icon in a button next to text, such as the x on a tag chip, stays in its button. AnimeTransitionGroupuseAnimeLayout
• A useAnimeLayout no longer rebuilds in the middle of an animation and cuts it short.
• TypeScript accepts a getter as the useAnimeLayout target and as the useDraggable trigger.

0.2.1

• With pnpm, nuxi dev warned that none of the animejs/* entries nanime adds to vite.optimizeDeps.include could be resolved, and Vite skipped pre-bundling them. The entries now point Vite at the AnimeJS copy inside nanime, so they resolve whether or not your app depends on animejs itself.
• Items in <AnimeTransitionGroup> lost an inline background, color or border-radius when the other items finished moving while they were still entering or leaving. They now keep it.
• animejs/easings, which #nanime/easings re-exports, is now pre-bundled too.
• The useAnimatable page now says that a number beside a property in the options is that property's tween duration, not a value to animate to.

0.2.0

• useAnimeLayout returns the AnimeJS layout itself instead of a wrapper object. Read properties straight off it rather than from .properties. animate() no longer takes a callback: use the timeline it returns, for example layout.animate().then(done).
• Added <AnimeTransition> and <AnimeTransitionGroup>, built on Vue's <Transition> and <TransitionGroup>. They run enter and leave with AnimeJS instead of CSS classes. In a list, the other items slide to their new places through AnimeJS layout, and stagger() delays work across items that enter or leave in the same update.
• The transition components take enter-animation, leave-animation and move-animation, as AnimeJS params or the name of a transition style. Seven styles are built in, such as fade and slide-up, and you can add your own under nanime.transitions in app.config.ts.
• New components module option. Set it to false to skip registering the transition components.
• useAnimeLayout now has a docs page and a patch() method. Pass it the function that changes your state, and it records the layout, runs the function, waits for Vue to update the DOM, then animates. The layout also rebuilds only when its target or parameters actually change, not on every reactive update.
• Hovering a composable, a component prop or a #nanime/types type in your editor now shows what it does and its default.
• Replacing an element inside a composable's parameters, for example the target of a timeline step, was ignored. The change check treated any two elements as equal, so the animation kept the old one.
• Parameters holding reactive state or an AnimeJS instance could overflow the stack during the change check.
• import { useAnimate } from '#nanime/composables' failed, so turning off auto-imports with composables: false left no way to import the composables.
• lodash-es and tailwind-merge are no longer added to Vite's pre-bundled dependencies. nanime never used them.
• New Components section. The Misc pages are now one Utilities page under Composables.
• New Media library example. Drag to bin and Loading sequence are rebuilt with the transition components. The Timeline storyboard and Text magnet examples are gone.
• New pages comparing nanime with Nuxt modules and Vue packages for AnimeJS.
• Every page has its own search title and description. Code blocks in live demos highlight correctly again.

0.1.14

• Fixed reactive is not defined runtime crashes caused by Nuxt auto-imports in node_modules.

0.1.13

• Added useAnimeScroll composable wrapping AnimeJS onScroll(). Owns the observer's lifecycle, and pass it to an animation's autoplay to drive it from scroll position.
• keepTime option lets a running animation keep its playhead across a rebuild instead of resetting. Defaults to false, matching prior behavior; set it per call, or nanime.keepTime: true in nuxt.config, to opt in.
• useSplitText exposes refresh(), for re-splitting after the element's text changes.
• Composable return values are recognised by proxy marker wherever AnimeJS accepts an instance, not by parameter name, so they work directly in autoplay or .sync().
• #nanime/types adds the scroll and remaining SVG types.
• useSplitText returned an empty methods object. Property extraction now walks the prototype chain instead of Object.keys.
• useSplitText re-splits current text and watches explicit sources, fixing a mount-time runaway.
• A timeline no longer empties itself when its parameters change. Buffered calls replay on rebuild.
• useAnimate now watches both target and parameters, not just target.
• An animation whose parameters carry another composable's instance is cancelled, not reverted, on rebuild, since Timer.revert() cascades into the linked ScrollObserver.
• autoplay resolved to null when the scroll observer did not exist yet, and never relinked afterwards.
• Rebuilds are skipped when the new parameters match the old ones. Checking for a match takes about 0.06 microseconds, next to nothing compared to the roughly 2.8 milliseconds a full rebuild costs at 200 targets.
• Every page rewritten for shorter, plainer sentences, with composable pages following one layout.
• Corrected wrong API claims across composable pages (return type, buffering, rebuild triggers), and wrong upstream AnimeJS defaults for ease, splitText words, and onScroll thresholds, now read from the installed package.
• Corrected example pages against their components (timeline count, drag handle, scramble target), and added a Scroll road trip showcase.
• Tightened showcase page prose for a consistent register, and fixed two factual errors in the text magnet page.

v0.0.11...v0.1.12

• Removed <ATransitionSlide>/<ATransitionScale>, the components/prefix module options, and the #nanime/components alias. They broke under useAnimeLayout, so nanime is composables-only until layout handling is sorted out.
• useDraggable now returns a buffered proxy (BufferedProxyReturns<T> rather than ProxyReturns<T>). Methods called before the instance exists are replayed once it is created, so draggable.disable() no longer needs optional chaining, and code that used it still compiles.
• useAnimeTimeline now buffers the whole timer control surface, not just the builder methods, so calls like play, pause, and seek are safe before mount. Its return type changed the same way as useDraggable's.
• @vueuse/core is no longer a dependency at all. The three helpers the runtime used from it (useMounted, tryOnScopeDispose and toReactive) are now in-tree, so installing nanime no longer pulls VueUse in.
• animejs and defu are plain dependencies now, and vue is the only peer left. Both are imported at runtime, so nothing has to be installed alongside nanime any more.
• New #nanime/proxies/svg alias re-exporting morphTo, createMotionPath and createDrawable, plus a #nanime/proxies root that re-exports both the text and SVG proxies.
• #nanime/utils also exports animate and createTimer for imperative work outside a composable.
• #nanime/types adds JSAnimation, Timer, TimerParams, TimerOptions, DrawableSVGGeometry, TextSplitterParams and SplitTemplateParams.
• .sync() accepts a composable's return value whether or not the underlying instance is held in a ref.
• Added a Performance guide covering engine choice, high-frequency updates and split-text cost, and caveats for every composable page.
• Added an Examples section with four showcase demos, replacing the transition components docs.

v0.0.11

• Added useAnimeTimeline composable wrapping AnimeJS createTimeline() with Vue ref target normalization, pre-mount command buffering, and timeline syncing.
• Composable returns can now be passed directly to .sync(). nanime unwraps them to raw AnimeJS instances.

v0.0.9/v0.0.10

• Renamed useLayout to useAnimeLayout. It stays auto-imported but undocumented and unsupported while its interaction with Vue's DOM management is worked out.
• Added useScrambleText composable wrapping AnimeJS scrambleText() with reactive text cycling.

v0.0.8

• Renamed animation options to parameters across all composables.
• Added instant play support for calling composables outside setup().

v0.0.5

• Initial release with useAnimate, useWaapiAnimate, useAnimatable, useSplitText, and useDraggable.