Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .changeset/pre.json
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,15 @@
"@solid-primitives/url": "0.1.0",
"@solid-primitives/favicon": "0.0.100",
"@solid-primitives/sortable": "0.0.100",
"@solid-primitives/drag-drop": "0.0.100"
"@solid-primitives/drag-drop": "0.0.100",
"@solid-primitives/animation": "1.0.0-next.0"
},
"changesets": [
"a11y-dataset-hydration-safety",
"a11y-solid2-initial",
"active-element-solid2-migration",
"analytics-solid2-redesign",
"animation-initial",
"async-docs-and-test-fixes",
"audio-solid2-migration",
"bounds-solid2-migration",
Expand Down
22 changes: 22 additions & 0 deletions packages/animation/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
# @solid-primitives/animation

## 1.0.0-next.1

### Minor Changes

- de4c1ba: New package. Provides reactive and imperative wrappers for the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) (WAAPI). All primitives follow the `make*` / `create*` convention: `make*` is imperative and returns immediately, `create*` is a reactive wrapper that re-runs on dependency change and cancels on owner disposal.

- `makeAnimate(el, keyframes, options?)` — thin wrapper around `element.animate()`
- `createAnimate(target, keyframes, options?)` — reactive `makeAnimate`; re-runs whenever target, keyframes, or options change
- `makeScrollAnimation(el, keyframes, options?)` — scroll-driven animation via `ScrollTimeline`
- `createScrollAnimation(target, keyframes, options?)` — reactive `makeScrollAnimation`
- `makeViewAnimation(el, keyframes, options?)` — viewport-driven animation via `ViewTimeline`; defaults `rangeStart`/`rangeEnd` to the entry phase so initially-visible elements animate correctly
- `createViewAnimation(target, keyframes, options?)` — reactive `makeViewAnimation`
- `makeFlip(el, options?)` — FLIP layout animation; `snapshot()` before DOM change, `flip()` after
- `makeStagger(els, keyframes, options?)` — staggered WAAPI animation across a list of elements with per-element delay offset
- `createStagger(targets, keyframes, options?)` — reactive `makeStagger`
- `makeAnimationGroup(animations)` — coordinates a static list of `Animation` objects as a unit; forwards `play`, `pause`, `cancel`, `reverse`, and `finish` to all simultaneously
- `createAnimationGroup(animations)` — reactive `makeAnimationGroup`; re-derives the group whenever the accessor returns a new list
- `makeMotionPath(el, path, options?)` — animates an element along a CSS `offset-path` using WAAPI
- `createMotionPath(target, path, options?)` — reactive `makeMotionPath`
- `makeSequence(factories)` — chains animation factories into a sequential playlist; each factory is called lazily when its predecessor finishes
- `createPresenceAnimation(target, show, options)` — manages mount/unmount lifecycle with WAAPI enter/exit animations; element stays mounted until its exit animation completes

## 0.0.1

### Minor Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/animation/deno.jsonc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/animation",
"version": "1.0.0-next.0",
"version": "1.0.0-next.1",
"description": "SolidJS primitives for the Web Animations API (WAAPI) — reactive wrappers for element.animate, scroll timelines, view timelines, FLIP, stagger, and animation groups.",
"license": "MIT",
"exports": "./src/index.ts",
Expand Down
2 changes: 1 addition & 1 deletion packages/animation/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@solid-primitives/animation",
"version": "1.0.0-next.0",
"version": "1.0.0-next.1",
"description": "SolidJS primitives for the Web Animations API (WAAPI) — reactive wrappers for element.animate, scroll timelines, view timelines, FLIP, stagger, and animation groups.",
"license": "MIT",
"homepage": "https://primitives.solidjs.community/package/animation",
Expand Down