close AF-2583
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new tag list header with breadcrumb navigation and a tag selector dropdown for improved navigation and tag management.
- Added a searchable dropdown menu for selecting and switching between tags.
- **Improvements**
- Updated the tag detail page to use a more dynamic, subscription-based document explorer for displaying tagged content.
- Enhanced header controls with an updated display menu button.
- **Style**
- Added comprehensive new styles for the tag list header and tag selector components.
- Introduced a new scroll area style for flexible layout.
- **Documentation**
- Marked an older page list header component as deprecated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new document list view with support for different layouts (list, grid, masonry) and improved multi-selection and batch deletion capabilities.
- Added a view toggle control for switching between document list layouts across relevant pages.
- Implemented a new collection list header with breadcrumb navigation and streamlined actions for editing collections and creating new pages.
- **Improvements**
- Simplified and unified document list rendering by delegating logic to a shared component.
- Enhanced document selection behavior, allowing toggling of individual items in select mode.
- Updated styles for document lists, group headers, and collection pages for a more consistent appearance.
- Refined wrapper component styling to prevent unintended HTML attribute forwarding.
- **Refactor**
- Replaced local implementations of view toggles and document grouping with shared components for easier maintenance.
- Removed deprecated and unused styles and props to streamline components and improve code clarity.
- Refactored collection detail and header components to adopt new context-driven document explorer architecture.
- **Documentation**
- Added deprecation notice to an outdated collection page list header component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced "Indexer & Embedding" workspace settings to manage AI embedding for local content, including document ignoring and attachment uploads.
- Added UI components for embedding settings, attachments, and ignored documents with pagination and deletion capabilities.
- Provided comprehensive file-type icons for attachments.
- **Improvements**
- Added a new tab for indexing and embedding in workspace settings navigation.
- Included test identifiers on key UI elements to enhance automated testing.
- **Localization**
- Added English localization strings covering all embedding-related UI text and actions.
- **Bug Fixes**
- Enabled previously skipped end-to-end tests for embedding settings to improve reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [AI-86](https://linear.app/affine-design/issue/AI-86)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced AI model switching in chat, allowing users to select from multiple AI models during conversations.
- Added a floating menu for easy AI model selection within the chat interface.
- Enabled visibility of the AI model switcher through a new experimental feature flag, configurable in workspace settings (canary builds only).
- **Enhancements**
- Improved session management in the chat panel for smoother model switching and state handling.
- Updated localization to support the new AI model switch feature in settings.
- **Bug Fixes**
- None.
- **Chores**
- Registered new components and services to support AI model switching functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Trashed page titles are now visually indicated with a strikethrough style in collection editor dialogs.
- **Bug Fixes**
- Trashed pages are now properly excluded from allowed lists and filtered views.
- **Refactor**
- Improved filtering logic for collections and page lists, separating user filters from system filters for more consistent results.
- Enhanced filter configuration options for more flexible and maintainable filtering behavior.
- **Style**
- Added a new style for displaying trashed items with a strikethrough effect.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added AI-powered store extension to support chat and transcription block schemas.
- Introduced a new database view extension for enhanced database block integration.
- **Refactor**
- Updated and reorganized import paths for improved code structure and maintainability.
- Consolidated and streamlined extension registration for store and view managers.
- **Chores**
- Removed deprecated or redundant extension classes and imports.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new Collection entity and store with reactive management and real-time updates.
- Added reactive favorite and shared filters with expanded filtering options.
- **Refactor**
- Overhauled collection and filtering logic for better performance and maintainability.
- Replaced legacy filtering UI and logic with a streamlined, service-driven rules system.
- Updated collection components to use reactive data streams and simplified props.
- Simplified collection creation by delegating ID generation and instantiation to the service layer.
- Removed deprecated hooks and replaced state-based filtering with observable-driven filtering.
- **Bug Fixes**
- Improved accuracy and consistency of tag and favorite filtering in collections.
- **Chores**
- Removed deprecated and unused filter-related files, types, components, and styles to reduce complexity.
- Cleaned up imports and removed unused code across multiple components.
- **Documentation**
- Corrected inline documentation for improved clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Updated workspace permission handling to use a unified role field within workspace data instead of separate admin and owner flags.
- Permission checks now rely on the workspace role for determining admin and owner status.
- **Chores**
- Removed deprecated queries and types related to admin and owner status.
- Cleaned up internal logic and variable naming for improved consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced feature flag synchronization for enhanced control over feature availability.
- Added new configuration options for store management, allowing initialization and feature flag setup.
- **Improvements**
- Updated how store extensions are accessed throughout the app for more robust initialization and configuration.
- Enhanced workspace entities to support feature flag services, improving flexibility for workspace-specific features.
- Centralized configuration of storage implementations for Electron environments.
- **Refactor**
- Simplified editor module by removing direct feature flag synchronization logic.
- Streamlined imports and configuration for storage modules, especially in Electron-based apps.
- **Bug Fixes**
- Ensured consistent retrieval of store extensions across various modules and platforms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a filter to exclude empty journals from document collections.
- Added a live-updating list of non-trashed document IDs for improved document management.
- **Improvements**
- Default filters in the document explorer have been updated to show all items, including trashed ones, unless filters are applied.
- Enhanced filtering in workspace views to automatically exclude empty journals and trashed documents.
- Increased the responsiveness of grouped document updates for a smoother user experience.
- **Bug Fixes**
- Removed unnecessary debug output from the document synchronization, member search, session management, and member selector components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
close AF-2605
[CleanShot 2025-05-08 at 13.56.38.mp4 <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/LakojjjzZNf6ogjOVwKE/4e36e838-7c7f-4f0a-89a8-fd582c2ef573.mp4" />](https://app.graphite.dev/media/video/LakojjjzZNf6ogjOVwKE/4e36e838-7c7f-4f0a-89a8-fd582c2ef573.mp4)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Centralized state management in the document explorer using a reactive context, replacing prop drilling and local state with observable streams for preferences, selection, grouping, and view options.
- Updated multiple components (display menus, quick actions, doc list items, group headers) to consume and update state directly via context observables.
- Simplified component signatures by removing now-unnecessary props related to preferences and state handlers.
- **Style**
- Adjusted user avatar display: avatars now only have right margin when user names are shown, and vertical alignment was improved.
- **New Features**
- User avatar elements now include a data attribute to indicate if the user name is displayed.
- **Bug Fixes**
- Improved handling of document tags to prevent errors when tags are not in the expected format.
- **Documentation**
- Added missing group header property for updated date fields in workspace property types.
- **Chores**
- Clarified and renamed internal types for quick actions to improve code clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new grouped document explorer with a masonry layout, advanced filtering, and multi-select capabilities.
- Added a floating toolbar for batch actions, such as deleting multiple documents.
- Implemented a feature flag to enable the new "All Docs" page, allowing gradual rollout.
- Added a new navigation component with links for Docs, Collections, and Tags.
- Introduced a display menu button supporting additional menu properties.
- **Enhancements**
- Redesigned navigation headers across document, collection, and tag pages for improved consistency and usability.
- Added new display and view toggling options for document lists.
- Improved styling and responsiveness for explorer and header components.
- Updated context to support dynamic view switching in the document explorer.
- **Bug Fixes**
- Updated context and prop types to enhance state management and user interactions.
- **Refactor**
- Replaced legacy page list views with a modern, grouped explorer interface.
- Simplified and modularized header components and styles for better maintainability.
- Removed workspace-specific controls from document headers to focus on explorer functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### New all docs list ui
close AF-2531, AF-2585, AF-2586, AF-2580
### What changed
- a new `display-menu` component
- properties visibility
- quick actions visibility
- extend DocPropertyType definition
- `showInDocList`: configure whether to show in doc and how to show (stack | inline)
- `docListProperty`: define how to render property in doc
- `groupHeader`: define how to render group header when grouped
- implement all properties's `docListProperty` renderer and `groupHeader` renderer
- new `docs-view` component
- render doc in `card` | `list` view
- split doc card into minimal components for reuse in list and card views, as well as visibility control
- implement docs-list with `<Masonry />` and multi-view support
- for list view, make masonry column count always `1`
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Redesigned document explorer with multiple view modes (list, grid, masonry), grouping, selection, and multi-delete.
- Added customizable display properties and quick actions (favorite, trash, split view, new tab, select) for documents.
- Introduced new group header and document item components with improved styling and interaction.
- Enabled dynamic rendering of document properties including tags, dates, users, templates, and themes.
- Added filtering support for trash status and enhanced localization for UI elements.
- Introduced drag handle size customization and expanded masonry layout configurability.
- Added contextual "More" menu with document operations like favorite, info, duplicate, and trash.
- Implemented shared context for explorer state management and multi-selection logic.
- **Enhancements**
- Improved virtual scrolling with active item tracking and configurable preload and debounce settings.
- Responsive, theme-aware styling applied across explorer and property components.
- Configurable UI elements and quick actions via user preferences.
- Enhanced error messages for unsupported property types in filters.
- Refined padding and layout calculations in masonry component for better visual consistency.
- Avatar and date components refactored for explicit prop-driven rendering and customization.
- **Bug Fixes**
- Improved error messages for unsupported property types in filters.
- **Documentation**
- Added new localization keys and updated language completeness for new features.
- **Chores**
- Modularized workspace property types with list and group header display components.
- Consolidated imports and enhanced code maintainability.
- Added new CSS styling modules for explorer components and workspace property types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
whats changed:
### orm
add a new `select$` method, can subscribe on only one field to improve batch subscribe performance
### yjs-observable
add a new `yjsObservePath` method, which can subscribe to changes from specific path in yjs. Improves batch subscribe performance
```ts
yjsGetPath(
this.workspaceService.workspace.rootYDoc.getMap('meta'),
'pages'
).pipe(
switchMap(pages => yjsObservePath(pages, '*.tags')),
map(pages => {
// only when tags changed
})
)
```
### standard property naming
All `DocProperty` components renamed to `WorkspaceProperty` which is consistent with the product definition.
### `WorkspacePropertyService`
Split the workspace property management logic from the `doc` module and create a new `WorkspacePropertyService`. The new service manages the creation and modification of properties, and the `docService` is only responsible for storing the property value data.
### new `<Filters />` component
in `core/component/filter`
### new `<ExplorerDisplayMenuButton />` component
in `core/component/explorer/display-menu`
### new `/workspace/xxx/all-new` route
New route for test components and functions
### new collection role service
Implemented some filter group order rules
see `collection-rules/index.ts`
### standard property type definition
define type in `modules\workspace-property\types.ts`
define components (name,icon,....) in `components\workspace-property-types\index.ts`
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced comprehensive filtering, grouping, and ordering capabilities for workspace documents with reactive updates.
- Added a new "All Pages" workspace view supporting dynamic filters and display preferences.
- Developed UI components for filter creation, condition editing, and display menu controls.
- Launched enhanced tag management with inline editors, selection, creation, and deletion workflows.
- Added workspace property types with dedicated filter UIs including checkbox, date, tags, and text.
- Introduced workspace property management replacing document property handling.
- Added modular providers for filters, group-by, and order-by operations supporting various property types and system attributes.
- **Improvements**
- Standardized tag and property naming conventions across the application (using `name` instead of `value` or `title`).
- Migrated document property handling to workspace property-centric logic.
- Enhanced internationalization with additional filter and display menu labels.
- Improved styling for filter conditions, display menus, and workspace pages.
- Optimized reactive data subscriptions and state management for performance.
- Refined schema typings and type safety for workspace properties.
- Updated imports and component references to workspace property equivalents throughout frontend.
- **Bug Fixes**
- Resolved tag property inconsistencies affecting display and filtering.
- Fixed filter and tag selection behaviors for accurate and reliable UI interactions.
- **Chores**
- Added and refined test cases for ORM, observables, and filtering logic.
- Cleaned up legacy document property code and improved type safety.
- Modularized and restructured components for better maintainability.
- Introduced new CSS styles for workspace pages and display menus.
- Added framework module configurations for collection rules and workspace property features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Documents now automatically track and display "created by" and "updated by" user information.
- Document creation and update timestamps are now managed and shown more accurately.
- Workspace and document metadata (name, avatar) updates are more responsive and reliable.
- Document creation supports middleware for customizing properties and behavior.
- **Improvements**
- Simplified and unified event handling for document list updates, reducing redundant event subscriptions.
- Enhanced integration of editor and theme settings into the document creation process.
- Explicit Yjs document initialization for improved workspace stability and reliability.
- Consolidated journal-related metadata display in document icons and titles for clarity.
- **Bug Fixes**
- Fixed inconsistencies in how workspace and document names are set and updated.
- Improved accuracy of "last updated" indicators by handling timestamps automatically.
- **Refactor**
- Removed deprecated event subjects and direct metadata manipulation in favor of more robust, reactive patterns.
- Streamlined document creation logic across various features (quick search, journal, recording, etc.).
- Simplified user avatar display components and removed cloud metadata dependencies.
- Removed legacy editor setting and theme service dependencies from multiple modules.
- **Chores**
- Updated internal APIs and interfaces to support new metadata and event handling mechanisms.
- Cleaned up unused code and dependencies related to editor settings and theme services.
- Skipped flaky end-to-end test to improve test suite stability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [AI-58](https://linear.app/affine-design/issue/AI-58).
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a toggleable AI reasoning feature in the chat interface, allowing users to enable or disable advanced reasoning during AI chat interactions.
- Added a new reasoning button to the chat input for quick access and control.
- **Enhancements**
- Improved chat configuration options to include reasoning settings, providing more flexibility for AI responses.
- Streamlined network search and image upload interactions for a smoother user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
---
### Release Notes
<details>
<summary>juliangarnier/anime (animejs)</summary>
### [`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
</details>
---
### 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.
---
- [ ] <!-- rebase-check -->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).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yMjcuMyIsInVwZGF0ZWRJblZlciI6IjM5LjIyNy4zIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5IiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->
