From 1fc51bf95efa940766a76e74b254aeeaf877d70c Mon Sep 17 00:00:00 2001 From: renovate <29139614+renovate@users.noreply.github.com> Date: Mon, 14 Apr 2025 01:29:09 +0000 Subject: [PATCH] chore: bump up animejs version to v4 (#11466) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [animejs](https://animejs.com) ([source](https://redirect.github.com/juliangarnier/anime)) | [`^3.2.2` -> `^4.0.0`](https://renovatebot.com/diffs/npm/animejs/3.2.2/4.0.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/animejs/4.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/animejs/4.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/animejs/3.2.2/4.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/animejs/3.2.2/4.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
juliangarnier/anime (animejs) ### [`v4.0.0`](https://redirect.github.com/juliangarnier/anime/releases/tag/4.0.0) [Compare Source](https://redirect.github.com/juliangarnier/anime/compare/v3.2.2...4.0.0) > **I'm still finalizing the release notes as there are MANY changes, but in the meantime, you can check out the brand new documentation [here](https://animejs.com/documentation).** The brand new Anime.js. ### API Breaking changes Every Anime.js feature is now exported as an ES Module. This is great for tree shaking, you don't have to ship the entire library anymore, only what you need. #### Animation The `anime(parameters)` function has been replaced with the `animate(targets, parameters)` module. The `targets` parameter has been replaced with a dedicated function parameter: `animate(targets, parameters)`. V3: ```javascript import anime from 'animejs'; const animation = anime({ targets: 'div', translateX: 100, }); ``` V4: ```javascript import { animate } from 'animejs'; const animation = animate('div', { translateX: 100, }); ``` #### Easings names The `ease` prefix has been removed: 'easeInOutQuad' -> 'inOutQuad'. #### Callbacks Callbacks have have been renamed like this: - `begin()` -> `onBegin()` - `update()` -> `onUpdate()` Here's all the change to the API ```diff - import anime from 'animejs'; + import { animate, createSpring, utils } from 'animejs'; - anime({ - targets: 'div', + animate('div', { translateX: 100, rotate: { - value: 360, + to: 360, - easing: 'spring(.7, 80, 10, .5)', + ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}), }, - easing: 'easeinOutExpo', + ease: 'inOutExpo', - easing: () => t => Math.cos(t), + ease: t => Math.cos(t), - direction: 'reverse', + reversed: true, - direction: 'alternate', + alternate: true, - loop: 1, + loop: 0, - round: 100, + modifier: utils.round(2), - begin: () => {}, + onBegin: () => {}, - update: () => {}, + onUpdate: () => {}, - change: () => {}, + onRender: () => {}, - changeBegin: () => {}, - changeComplete: () => {}, - loopBegin: () => {}, - loopComplete: () => {}, + onLoop: () => {}, - complete: () => {}, + onComplete: () => {}, }); ``` #### Promises No more `.finished` property, promises are now handled directly with `animation.then()`: ```diff - import anime from 'animejs'; + import { animate, utils } from 'animejs'; - anime({ targets: target, prop: x }).finished.then(() => {}); + animate(target, { prop: x }).then(() => {}); ``` #### Values ##### To The object syntax `value` property has been renamed `to`: ```diff - translateX: { value: 100 } + translateX: { to: 100 } ``` #### Animation parameters ##### Default `easing` The new default easing is `'outQuad'` instead of `'easeOutElastic(1, .5)'`. ##### `composition` In V3 all animations coexist and overlaps with each other. This can cause animations with the same targets and animated properties to create weird results. V4 cancels a running tween if a new one is created on the same target with the same property. This behaviour can be confifugred using the new `composition` parameter. `composition: 'none'` // The old V3 behaviour, animations can overlaps `composition: 'replace'` // The new V4 default `composition: 'add'` // Creates additive animations by adding the values of the currently running animations with the new ones ##### `round` -> `modifier` The `round` parameter has been replaced with a more flexible parameters that allows you to define custom functions to transform the numerical value of an animation just before the rendering. ```diff - round: 100 + modifier: utils.round(2) ``` You can of course defines your own modifier functions like this: ```javascript const animation = animate('div', { translateX: '100rem', modifier: v => v % 10 // Note that the unit 'rem' will automatically be passed to the rendered value }); ``` #### Playback parameters ##### `direction` The `direction` parameter has been replaced with an `alternate` and `reversed` parameters V3: ```javascript const animation = anime({ targets: 'div', direction: 'reverse', // direction: 'alternate' It wasn't possible to combined reverse and alternate direction before }); ``` V4: ```javascript import { animate } from 'animejs'; const animation = animate('div', { translateX: 100, reversed: true, alternate: true, }); ``` #### Timelines: ```diff - import anime from 'animejs'; + import { createTimeline, stagger } from 'animejs'; - anime.timeline({ + createTimeline({ - duration: 500, - easing: 'easeInOutQuad', + defaults: { + duration: 500, + ease: 'inOutQuad', + } - loop: 2, + loop: 1, - }).add({ - targets: 'div', + }).add('div', { rotate: 90, }) - .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0) - .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100) - .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200) - .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300) + .add('.target', { opacity: 0, onComplete }, stagger(100)) ``` ##### Stagger ```diff - import anime from 'animejs'; + import { animate, stagger } from 'animejs'; - anime({ - targets: 'div', + animate('div', { - translateX: anime.stagger(100), + translateX: stagger(100), - delay: anime.stagger(100, { direction: 'reversed' }), + translateX: stagger(100, { reversed: true }), }); ``` #### SVG ```diff - import anime from 'animejs'; + import { animate, svg } from 'animejs'; - const path = anime.path('path'); + const { x, y, angle } = svg.createMotionPath('path'); - anime({ - targets: '#shape1', + animate('#shape1', { - points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369', + points: svg.morphTo('#shape2'), - strokeDashoffset: [anime.setDashoffset, 0], + strokeDashoffset: svg.drawLine(), - translateX: path('x'), - translateY: path('y'), - rotate: path('angle'), + translateX: x, + translateY: y, + rotate: angle, }); ``` #### Utils ```diff - import anime from 'animejs'; + import { utils } from 'animejs'; - const value = anime.get('#target1', 'translateX'); + const value = utils.get('#target1', 'translateX'); - anime.set('#target1', { translateX: 100 }); + utils.set('#target1', { translateX: 100 }); - anime.remove('#target1'); + utils.remove('#target1'); - const rounded = anime.round(value); + const rounded = utils.round(value, 0); ``` #### Engine ```diff - import anime from 'animejs'; + import { engine } from 'animejs'; - anime.suspendWhenDocumentHidden = false; + engine.pauseWhenHidden = false; - anime.speed = .5; + engine.playbackRate = .5; ``` ### Improvements #### Performances Major performance boost and lower memory footprint. V4 has bee re-written from scratch by keeping performance in mind at every steps. #### Better tween composition The tween system has been refactored to improve animations behaviours when they overlaps. This fix lots of issues, especially when creating multiple animations with the same property on the same target. #### Additive animations You can also blend animations together with the new `composition: 'add'` parameter. #### Improved Timelines - Child animations can new be looped and reversed - Add supports for labels - Add supports for `.set()` in timeline - New position operators for more flexibility - Multi-target child animation can be positioned using the `stagger` function - Easier children defaults configuration - Greatly improved support for CSS transforms composition from one child animation to another ```javascript const tl = createTimeline({ playbackRate: .2, defaults: { duration: 500, easing: 'outQuad', } }); tl.add('START', 100) // Add a label a 100ms .set('.target', { opacity: 0 }) .add('.target', { translateY: 100, opacity: 1, onComplete: () => {}, }, stagger(100)) .add('.target', { scale: .75, }, 'START') .add('.target', { rotate: '1turn', }, '<<+=200') ``` #### Properties ##### CSS Variables You can now use CSS variables directly like any other property: ```javascript // Animate the values of the CSS variables '--radius' animate('#target', { '--radius': '20px' }); ``` ##### Animating *from* Animate *from* a value ```diff + translateX: { from: 50 } ``` ##### From -> To Even if the `[from, to]` shortcut is still valid in V4, you can now also write it like this: ```diff + translateX: { from: 50, to: 100 } ``` ##### Colors You can now animate hex colors with an alpha channel like '#F443' or '#FF444433'. #### Timers You can now create timers with the `createTimer` module. Timers can be use as replacement for `setTimeout`or `setInterval` but with all the playbacks parameters, callbacks and the `Promise` system provided by anime.js. ``` const interval = createTimer({ onLoop: () => { // do something every 500ms }, duration: 500, }); const timeout = createTimer({ onComplete: () => { // do something in 500ms }, duration: 500, }); const gameLogicLoop = createTimer({ frameRate: 30, onUpdate: gameSystems, }); const gameRenderLoop = createTimer({ frameRate: 60, onUpdate: gameRender, }); ``` #### Variable frame rate You can now change the frame rate to all animations or to a specific Timeline / Animation / Timer
--- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/toeverything/AFFiNE). --- packages/frontend/core/package.json | 2 +- .../affine/onboarding/steps/animate-in.tsx | 54 ++++++++-------- .../mobile/components/swipe-menu/index.tsx | 9 ++- .../mobile/dialogs/setting/swipe-dialog.tsx | 61 ++++++++++--------- .../detail/journal-date-picker/month.tsx | 10 +-- .../detail/journal-date-picker/viewport.tsx | 11 ++-- .../detail/journal-date-picker/week.tsx | 10 +-- .../peek-view/view/modal-container.tsx | 55 ++++++++--------- yarn.lock | 10 +-- 9 files changed, 112 insertions(+), 110 deletions(-) diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json index a8e52d00f..ad3a1e935 100644 --- a/packages/frontend/core/package.json +++ b/packages/frontend/core/package.json @@ -39,7 +39,7 @@ "@toeverything/pdf-viewer": "^0.1.1", "@toeverything/theme": "^1.1.12", "@vanilla-extract/dynamic": "^2.1.2", - "animejs": "^3.2.2", + "animejs": "^4.0.0", "bytes": "^3.1.2", "clsx": "^2.1.1", "cmdk": "^1.0.4", diff --git a/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx b/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx index e6adc0f71..e6774e962 100644 --- a/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx +++ b/packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx @@ -1,4 +1,4 @@ -import anime from 'animejs'; +import { createSpring, waapi } from 'animejs'; import { useEffect } from 'react'; import type { PaperProps } from '../curve-paper/paper'; @@ -13,15 +13,14 @@ interface AnimateInProps { onFinished?: () => void; } -const easing = 'spring(3.2, 100, 10, 0)'; +const ease = createSpring({ + mass: 3.2, + stiffness: 100, + damping: 10, + velocity: 0, +}); const segments = 6; -const animeSync = (params: Parameters[0]) => { - return new Promise(resolve => { - anime({ ...params, complete: () => resolve(null) }); - }); -}; - export const AnimateIn = ({ article, paperProps, @@ -33,24 +32,31 @@ export const AnimateIn = ({ const rotateX = (1.2 * enterOptions.curve) / segments; useEffect(() => { - Promise.all([ - animeSync({ - targets: `[data-id="${id}"] .${paperStyles.segment}[data-direction="up"]`, - rotateX: [-rotateX, 0], - easing, + let aborted = false; + + waapi.animate( + `[data-id="${id}"] .${paperStyles.segment}[data-direction="up"]`, + { + rotateX: { from: -rotateX, to: 0 }, + ease, delay: enterOptions.delay, - }), - animeSync({ - targets: `[data-id="${id}"] .${paperStyles.segment}[data-direction="down"]`, - rotateX: [rotateX, 0], - easing, + onComplete: () => { + if (!aborted) onFinished?.(); + }, + } + ); + waapi.animate( + `[data-id="${id}"] .${paperStyles.segment}[data-direction="down"]`, + { + rotateX: { from: rotateX, to: 0 }, + ease, delay: enterOptions.delay, - }), - ]) - .then(() => { - onFinished?.(); - }) - .catch(console.error); + } + ); + + return () => { + aborted = true; + }; }, [enterOptions.delay, id, rotateX, onFinished]); const props = { diff --git a/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx b/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx index 5fe1484d6..b5a27f2d1 100644 --- a/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx +++ b/packages/frontend/core/src/mobile/components/swipe-menu/index.tsx @@ -1,5 +1,5 @@ import { LiveData, useLiveData, useService } from '@toeverything/infra'; -import anime from 'animejs'; +import { animate as anime, eases } from 'animejs'; import clsx from 'clsx'; import { type HTMLAttributes, @@ -53,7 +53,7 @@ const animate: TickFunc<[number]> = (content, menu, options, to) => { { deltaX }, { set(target, key, value) { - if (key !== 'deltaX') return false; + if (key !== 'deltaX') return true; target.deltaX = value; tick(content, menu, { ...options, deltaX: value }); return true; @@ -61,11 +61,10 @@ const animate: TickFunc<[number]> = (content, menu, options, to) => { } ); if (deltaX === to) return; - anime({ - targets: proxy, + anime(proxy, { deltaX: to, duration: 230, - easing: 'easeInOutSine', + ease: eases.inOutSine, }); }; diff --git a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx index fb797270a..9a5285888 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx +++ b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx @@ -6,7 +6,7 @@ import { import { PageHeader } from '@affine/core/mobile/components'; import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc'; import { assignInlineVars } from '@vanilla-extract/dynamic'; -import anime from 'animejs'; +import { animate } from 'animejs'; import { createContext, type PropsWithChildren, @@ -78,9 +78,8 @@ const getAnimeProxy = ( if (key === 'deltaX') { target.deltaX = value; tick(overlay, dialog, prev, value, overlay.clientWidth); - return true; } - return false; + return true; }, } ); @@ -91,25 +90,27 @@ const cancel = ( dialog: HTMLDivElement, prev: HTMLElement | null, deltaX: number, - complete?: () => void + onComplete?: () => void ) => { - anime({ - targets: getAnimeProxy( + animate( + getAnimeProxy( overlay, dialog, prev, Math.min(overlay.clientWidth, Math.max(0, deltaX)) ), - deltaX: 0, - easing: 'cubicBezier(.25,.36,.24,.97)', - duration: 320, - complete: () => { - complete?.(); - setTimeout(() => { - reset(overlay, dialog, prev); - }, 0); - }, - }); + { + deltaX: 0, + easing: 'cubicBezier(.25,.36,.24,.97)', + duration: 320, + onComplete: () => { + onComplete?.(); + setTimeout(() => { + reset(overlay, dialog, prev); + }, 0); + }, + } + ); }; const close = ( @@ -117,25 +118,27 @@ const close = ( dialog: HTMLDivElement, prev: HTMLElement | null, deltaX: number, - complete?: () => void + onComplete?: () => void ) => { - anime({ - targets: getAnimeProxy( + animate( + getAnimeProxy( overlay, dialog, prev, Math.min(overlay.clientWidth, Math.max(0, deltaX)) ), - deltaX: overlay.clientWidth, - easing: 'cubicBezier(.25,.36,.24,.97)', - duration: 320, - complete: () => { - complete?.(); - setTimeout(() => { - reset(overlay, dialog, prev); - }, 0); - }, - }); + { + deltaX: overlay.clientWidth, + easing: 'cubicBezier(.25,.36,.24,.97)', + duration: 320, + onComplete: () => { + onComplete?.(); + setTimeout(() => { + reset(overlay, dialog, prev); + }, 0); + }, + } + ); }; const SwipeDialogContext = createContext<{ diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/month.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/month.tsx index 80df2caa3..7fb234c35 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/month.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/month.tsx @@ -1,5 +1,5 @@ import { SwipeHelper } from '@affine/core/mobile/utils'; -import anime from 'animejs'; +import { animate, eases } from 'animejs'; import clsx from 'clsx'; import dayjs from 'dayjs'; import { @@ -72,14 +72,14 @@ export const MonthView = ({ viewportHeight }: MonthViewProps) => { const animateTo = useCallback( (dir: 0 | 1 | -1) => { + if (!swipeRef.current) return; setAnimating(true); - anime({ - targets: swipeRef.current, + animate(swipeRef.current, { translateX: -dir * width, duration: 300, - easing: 'easeInOutSine', - complete: () => { + ease: eases.inOutSine, + onComplete: () => { setSwipingDeltaX(0); setAnimating(false); // should recover swipe before change month diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/viewport.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/viewport.tsx index 1d21537a7..5fb16586a 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/viewport.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/viewport.tsx @@ -1,6 +1,6 @@ import { useGlobalEvent } from '@affine/core/mobile/hooks/use-global-events'; import { SwipeHelper } from '@affine/core/mobile/utils'; -import anime from 'animejs'; +import { animate, eases } from 'animejs'; import clsx from 'clsx'; import dayjs from 'dayjs'; import { @@ -59,7 +59,7 @@ export const ResizeViewport = ({ { value: draggedDistance }, { set(target, key, value) { - if (key !== 'value') return false; + if (key !== 'value') return true; setDragOffset(value); target.value = value; return true; @@ -68,12 +68,11 @@ export const ResizeViewport = ({ ); setIsAnimating(true); - anime({ - targets: dragOffsetProxy, + animate(dragOffsetProxy, { value: targetDragOffset, duration: 300, - easing: 'easeOutCubic', - complete: () => { + ease: eases.outCubic, + onComplete: () => { setMode(targetMode); setDragOffset(0); setIsDragging(false); diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/week.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/week.tsx index 7447dcc66..df6bc6ead 100644 --- a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/week.tsx +++ b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/week.tsx @@ -1,6 +1,6 @@ import { SwipeHelper } from '@affine/core/mobile/utils'; import { useI18n } from '@affine/i18n'; -import anime from 'animejs'; +import { animate, eases } from 'animejs'; import clsx from 'clsx'; import dayjs from 'dayjs'; import { @@ -82,12 +82,12 @@ export const WeekRowSwipe = ({ start }: WeekRowProps) => { (dir: 0 | 1 | -1) => { setAnimating(true); - anime({ - targets: swipeRef.current, + if (!swipeRef.current) return; + animate(swipeRef.current, { translateX: -dir * width, - easing: 'easeInOutSine', + ease: eases.inOutSine, duration: 300, - complete: () => { + onComplete: () => { setSwipingDeltaX(0); setAnimating(false); if (dir !== 0) { diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx index 9128fdc23..ddc7a9505 100644 --- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx @@ -1,6 +1,6 @@ import * as Dialog from '@radix-ui/react-dialog'; import { useLiveData, useService } from '@toeverything/infra'; -import anime, { type AnimeInstance, type AnimeParams } from 'animejs'; +import { eases, waapi, type WAAPIAnimation } from 'animejs'; import clsx from 'clsx'; import { createContext, @@ -18,6 +18,8 @@ import { EditorSettingService } from '../../editor-setting'; import type { PeekViewAnimation, PeekViewMode } from '../entities/peek-view'; import * as styles from './modal-container.css'; +type WAAPIAnimationParams = Parameters[1]; + const contentOptions: Dialog.DialogContentProps = { ['data-testid' as string]: 'peek-view-modal', onPointerDownOutside: e => { @@ -89,7 +91,7 @@ export const PeekViewModalContainer = forwardRef< const contentRef = useRef(null); const overlayRef = useRef(null); const controlsRef = useRef(null); - const prevAnimeMap = useRef>({}); + const prevAnimeMap = useRef>({}); const editorSettings = useService(EditorSettingService).editorSetting; const fullWidthLayout = useLiveData( editorSettings.settings$.selector(s => s.fullWidthLayout) @@ -98,11 +100,10 @@ export const PeekViewModalContainer = forwardRef< const animateControls = useCallback((animateIn = false) => { const controls = controlsRef.current; if (!controls) return; - anime({ - targets: controls, + waapi.animate(controls, { opacity: animateIn ? [0, 1] : [1, 0], translateX: animateIn ? [-32, 0] : [0, -32], - easing: 'easeOutQuad', + ease: eases.inOutSine, duration: 230, }); }, []); @@ -110,9 +111,9 @@ export const PeekViewModalContainer = forwardRef< async ( zoomIn?: boolean, paramsMap?: { - overlay?: AnimeParams; - content?: AnimeParams; - contentWrapper?: AnimeParams; + overlay?: WAAPIAnimationParams; + content?: WAAPIAnimationParams; + contentWrapper?: WAAPIAnimationParams; } ) => { // if target has no bounding client rect, @@ -168,32 +169,29 @@ export const PeekViewModalContainer = forwardRef< prevAnimeMap.current.content?.pause(); prevAnimeMap.current.contentWrapper?.pause(); - const overlayAnime = anime({ - targets: overlay, + const overlayAnime = waapi.animate(overlay, { opacity: zoomIn ? [0, 1] : [1, 0], - easing: 'easeOutQuad', + ease: eases.inOutSine, duration: 230, ...paramsMap?.overlay, }); const contentAnime = paramsMap?.content && - anime({ - targets: content, + waapi.animate(content, { ...paramsMap.content, }); - const contentWrapperAnime = anime({ - targets, + const contentWrapperAnime = waapi.animate(targets, { left: [fromRect.left, toRect.left], top: [fromRect.top, toRect.top], width: [fromRect.width, toRect.width], height: [fromRect.height, toRect.height], - easing: 'easeOutQuad', + ease: eases.inOutSine, duration: 230, ...paramsMap?.contentWrapper, - complete: (ins: AnimeInstance) => { - paramsMap?.contentWrapper?.complete?.(ins); + onComplete: (ins: WAAPIAnimation) => { + paramsMap?.contentWrapper?.onComplete?.(ins); setAnimeState('idle'); onAnimationEnd?.(); overlay.style.pointerEvents = ''; @@ -272,7 +270,7 @@ export const PeekViewModalContainer = forwardRef< content: { opacity: [1, 0], duration: 180, - easing: 'easeOutQuad', + easing: 'ease', }, }) .then(() => setVtOpen(false)) @@ -292,12 +290,11 @@ export const PeekViewModalContainer = forwardRef< resolve(); return; } - anime({ - targets: [overlay, contentClip], + waapi.animate([overlay, contentClip], { opacity: animateIn ? [0, 1] : [1, 0], - easing: 'easeOutQuad', + ease: eases.inOutSine, duration: 230, - complete: () => { + onComplete: () => { if (!animateIn) setVtOpen(false); setAnimeState('idle'); onAnimationEnd?.(); @@ -323,20 +320,18 @@ export const PeekViewModalContainer = forwardRef< return; } - anime({ - targets: [overlay], + waapi.animate([overlay], { opacity: animateIn ? [0, 1] : [1, 0], - easing: 'easeOutQuad', + ease: eases.inOutSine, duration: 230, }); - anime({ - targets: [contentClip], + waapi.animate([contentClip], { opacity: animateIn ? [0, 1] : [1, 0], y: animateIn ? ['-2%', '0%'] : ['0%', '-2%'], scale: animateIn ? [0.96, 1] : [1, 0.96], - easing: 'cubicBezier(0.42, 0, 0.58, 1)', + ease: eases.cubicBezier(0.42, 0, 0.58, 1), duration: 230, - complete: () => { + onComplete: () => { if (!animateIn) setVtOpen(false); setAnimeState('idle'); onAnimationEnd?.(); diff --git a/yarn.lock b/yarn.lock index a5027666b..3bac73584 100644 --- a/yarn.lock +++ b/yarn.lock @@ -424,7 +424,7 @@ __metadata: "@types/lodash-es": "npm:^4.17.12" "@vanilla-extract/css": "npm:^1.17.0" "@vanilla-extract/dynamic": "npm:^2.1.2" - animejs: "npm:^3.2.2" + animejs: "npm:^4.0.0" bytes: "npm:^3.1.2" clsx: "npm:^2.1.1" cmdk: "npm:^1.0.4" @@ -16439,10 +16439,10 @@ __metadata: languageName: node linkType: hard -"animejs@npm:^3.2.2": - version: 3.2.2 - resolution: "animejs@npm:3.2.2" - checksum: 10/7abdb56f415c666ba02f4e64fdbb10d457fed7e3711b0f006f97e48e5650097013397d890e8ceb31e9e06b73bf6dfd9202309d0dae0fc0b5190aa7c4e0ab7054 +"animejs@npm:^4.0.0": + version: 4.0.0 + resolution: "animejs@npm:4.0.0" + checksum: 10/2d9e67b4de9d2ba3d44c2e00900d9baae5ee6a7dbb01b2b78b93bdbf1da0656bf8ad88c22607248889495faad52caaac2f0ae0436a5d5b7828f45200a9f48064 languageName: node linkType: hard