Circuit-Forge/avocet
3
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity Actions

docs: fix animejs v4 API examples in animation plan (spring object form, 2-arg animate)

Browse source
This commit is contained in:
pyr0ball 2026-03-08 07:00:10 -07:00
parent 4bea1b6812
commit 3197252c31
1 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/plans/2026-03-08-anime-animation-plan.md
View file

@ -185,7 +185,8 @@ const BALL_RADIUS = '50%'
const CARD_RADIUS = '1rem' const CARD_RADIUS = '1rem'
const PICKUP_Y_OFFSET = 80 // px above finger const PICKUP_Y_OFFSET = 80 // px above finger
const PICKUP_DURATION = 200 const PICKUP_DURATION = 200
const SNAP_SPRING = spring(1, 80, 10) // NOTE: animejs v4 — spring() takes an object, not positional args
const SNAP_SPRING = spring({ mass: 1, stiffness: 80, damping: 10 })
interface Motion { rich: Ref<boolean> } interface Motion { rich: Ref<boolean> }
@ -195,13 +196,13 @@ export function useCardAnimation(
) { ) {
function pickup() { function pickup() {
if (!motion.rich.value || !cardEl.value) return if (!motion.rich.value || !cardEl.value) return
// NOTE: animejs v4 — animate() is 2-arg; timing options merge into the params object
animate(cardEl.value, { animate(cardEl.value, {
scale: BALL_SCALE, scale: BALL_SCALE,
borderRadius: BALL_RADIUS, borderRadius: BALL_RADIUS,
y: -PICKUP_Y_OFFSET, y: -PICKUP_Y_OFFSET,
}, { duration: PICKUP_DURATION,
duration: PICKUP_DURATION, ease: SNAP_SPRING,
ease: SNAP_SPRING,
}) })
} }
@ -212,13 +213,13 @@ export function useCardAnimation(
function snapBack() { function snapBack() {
if (!motion.rich.value || !cardEl.value) return if (!motion.rich.value || !cardEl.value) return
// No duration — spring physics determines settling time
animate(cardEl.value, { animate(cardEl.value, {
x: 0, x: 0,
y: 0, y: 0,
scale: 1, scale: 1,
borderRadius: CARD_RADIUS, borderRadius: CARD_RADIUS,
}, { ease: SNAP_SPRING,
ease: SNAP_SPRING,
}) })
} }
@ -226,10 +227,10 @@ export function useCardAnimation(
if (!motion.rich.value || !cardEl.value) return if (!motion.rich.value || !cardEl.value) return
const el = cardEl.value const el = cardEl.value
if (type === 'label') { if (type === 'label') {
animate(el, { y: '-120%', scale: 0.85, opacity: 0 }, { duration: 280, ease: 'out(3)' }) animate(el, { y: '-120%', scale: 0.85, opacity: 0, duration: 280, ease: 'out(3)' })
} else if (type === 'discard') { } else if (type === 'discard') {
// Two-step: crumple then shrink // Two-step: crumple then shrink (keyframes array in params object)
animate(el, [ animate(el, { keyframes: [
{ scale: 0.95, rotate: 2, filter: 'brightness(0.6) sepia(1) hue-rotate(-20deg)', duration: 140 }, { scale: 0.95, rotate: 2, filter: 'brightness(0.6) sepia(1) hue-rotate(-20deg)', duration: 140 },
{ scale: 0, rotate: 8, opacity: 0, duration: 210 }, { scale: 0, rotate: 8, opacity: 0, duration: 210 },
]) ])
@ -420,11 +421,11 @@ const gridEl = ref<HTMLElement | null>(null)
```ts ```ts
watch(isHeld, (held) => { watch(isHeld, (held) => {
if (!motion.rich.value || !gridEl.value) return if (!motion.rich.value || !gridEl.value) return
// animejs v4: 2-arg animate, spring() takes object
animate(gridEl.value, animate(gridEl.value,
held held
? { y: -8, opacity: 0.45 } ? { y: -8, opacity: 0.45, ease: spring({ mass: 1, stiffness: 80, damping: 10 }), duration: 250 }
: { y: 0, opacity: 1 }, : { y: 0, opacity: 1, ease: spring({ mass: 1, stiffness: 80, damping: 10 }), duration: 250 }
{ ease: spring(1, 80, 10), duration: 250 }
) )
}) })
``` ```