Releases: novincode/motionkit
Releases · novincode/motionkit
MotionKit v2.13.1
🐛 Fixes
- Nested animation modifiers not running — Fixed a critical bug where post-process modifiers (Continuous Rotation, Follow Path, Stroke Trim, Copy Animation) on layers inside nested child frame animations were silently skipped during playback and export. The child timeline pipeline now computes modifier instances and applies them through the same shared pipeline used by the top-level frame.
- Per-layer Loop Mode in nested animations — Pre-process modifiers (Loop Mode) on individual layers within nested child frames now correctly remap time for property, morph, text, and discrete tracks. Previously only the timeline-level loop mode was respected.
♻️ Refactor
- Unified modifier interpolation pipeline — Extracted the modifier field interpolation, expression evaluation, and pre-process time remapping logic from
ui/store/modifierPlayback.tsinto a new shared module (shared/modifierInterpolation.ts). Both the UI and plugin now use the exact same code path, eliminating behavioral drift between preview and render. - Consolidated
baselineRotationintoLayerModifierData— The rotation baseline used by Continuous Rotation is now stored canonically inmodifierData.baselineRotation(with backward-compat fallback to the deprecatedLayerTimeline.baselineRotation). This keeps modifier-specific data with the modifier system. - Modifier cleanup on delete — Removing the last rotation-dependent modifier from a layer now cleans up
modifierData.baselineRotation, preventing orphaned data from accumulating.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.10.2
✨ Features
- About dialog — New "About MotionKit" entry in the overflow menu showing version, links to Figma community page, GitHub, official website, and developer profile. Includes a quick link to open the Support page.
- Figma community CTA — Support dialog now features a prominent card to rate/like the plugin on the Figma community page.
- Spread the Word link — "Spread the Word" card now links to the official spread-the-word page instead of GitHub.
- Website support link — Added "Support on Website" card to the financial support section.
🐛 Fixes
- Keyframe filter missing modifier layers — "Show only animated" filter now correctly includes layers with modifier keyframes, discrete keyframes (visibility, blend mode), text keyframes, and morph keyframes. Previously only standard property keyframes were considered, causing layers animated exclusively via modifiers or discrete tracks to disappear when the filter was active. Unified via
layerHasAnyKeyframes()helper used across all four filter locations (row generation, flat layer list, auto-expand, and animated count badge). - MotionKit export missing data — Export now includes text tracks, discrete tracks, modifier data (instances + keyframe tracks), custom anchor points, baseline rotation, typewriter source text, initial text state, timeline markers, and timeline clips. Previously only standard property/morph tracks were exported.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.9.2
🐛 Fixes
- Nested frame scaling — Fixed inner layer positions drifting during parent frame scale animations. Three interrelated bugs fixed:
- Per-property merge tracking in
applyChildTimelineAtTime(was per-node, causing x/y proportional scaling to be skipped when width/height was merged) - Recording filter now preserves x/y for descendants of animated resized child frames (constraint layout, not inherited movement)
- UI playback no longer composes Frame position deltas into children (only Groups need composition — Frames create their own coordinate space)
- Per-property merge tracking in
✨ Features
- Collapsed container keyframe aggregation — When a Group, Frame, Component, or Instance is collapsed, all descendant keyframes are shown on the parent row with full easing bars, selection, and grab/scale support. Uses the same
TrackEasingBars+KeyframeDiamondcomponents as property tracks — no custom rendering.
🏗️ Architecture
collectDescendantKeyframeIdsAtTimehelper — Shared recursive helper for selecting descendant keyframes at a given time, used by all diamond types via thechildLayersprop.flattenDescendantLayershelper — Recursively flattens descendant layers for rendering on collapsed parent rows.- Removed
AggregateChildDiamonds— Replaced custom ghost diamond + connector bar component with real diamond/easing-bar components reusing existing patterns.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.8.1
🐛 Fixes
- FBF clips disabled in parent timeline —
resolveClipOverlapsnow only compares clips with the samenodeId. Clips for different child frames no longer disable each other. - Corrupted clip data repair — Auto re-enables clips on load that were incorrectly disabled by the old overlap bug.
🏗️ Architecture
- Unified child animation pipeline — Replaced
applyNestedAnimationState+applyNestedFBFStatewith a singleapplyChildAnimationAtTime()used by all code paths (preview, FBF playback, render, export). Handles both FBF and Timeline modes with recursive child-of-child support.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.7.0
✨ Features
- Stroke Super-Group — Stroke is now a collapsible parent group with organized sub-groups, matching the Fill architecture:
- Solid Color — Stroke color (R/G/B) and opacity.
- Gradient — Up to 4 gradient stops (position, RGBA), gradient transform (2×3 matrix), and gradient opacity. Supports LINEAR, RADIAL, ANGULAR, and DIAMOND gradients.
- Image Filters — Exposure, contrast, saturation, temperature, tint, highlights, shadows for image stroke paints.
- Pattern — Scale, spacing X/Y for pattern stroke paints.
- Settings — Stroke weight and miter limit.
- Dash — Dash length, gap, and offset.
- Dynamic — Frequency, wiggle, and smoothen for dynamic strokes.
- Brush — Gap, wiggle, size jitter, angular jitter, and rotation for scatter brushes.
- Stroke Discrete Properties — Brush direction, fill type, pattern tile type, and pattern alignment are now tracked as discrete (non-interpolatable) properties.
- Fill Super-Group — Fill refactored into parent group with Solid Color, Gradient, Image Filters, and Pattern sub-groups (same architecture as Stroke).
🎨 UX Improvements
- Removed emoji icons from property groups — replaced with simple Unicode characters for consistent cross-platform rendering.
- Removed redundant icons from sub-group rows — cleaner layer list with less visual noise.
- Removed dead
PROPERTY_ICONSconstant from LayerList. - Flat 2-level hierarchy for all parent groups — no more awkward 3-level nesting.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.5.0
✨ Improvements
- Layer Drag & Drop — Rebuilt from scratch with custom tree DnD. Drop above, below, or inside groups/frames with clear visual indicators.
- Transform & Morph Fixes — More reliable baseline sync, morph drift correction, and recording grace period for smoother workflows.
🐛 Fixes
- Drop indicator accuracy and ghost element sizing.
- Nested layer reparenting now syncs correctly with Figma.
- Groups auto-expand when dropping inside them.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.4.0
✨ Features
- Timeline Marker System — Add, remove, drag, select, copy/cut/paste markers across timelines. Color-coded with label support. Context menu and double-click to edit.
- Marker Edit Dialog — Inline label editing with 6-color picker and live preview.
- Shortcut Panel Search — Filter shortcuts by name, key, or description in Settings.
🎨 UX Improvements
- Redesigned marker visuals — unified diamond + stem shape with per-marker colors and anti-overlap labels.
- Grouped toolbar sections for Snap, Range, and Markers.
- Playhead centering fix for pixel-perfect alignment.
- Minimize shortcut changed to
`for quicker access. - Work area trash only appears when both start and end are set.
- Markers respect visibility — hidden markers don't snap or show controls.
🐛 Fixes
- Markers deselect when clicking timeline background.
- G key grab prioritises keyframes/clips over markers.
- Overlapping markers cleaned up on drag and toggle.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.2.0
✨ Features
- Layers Panel — New sidebar tab for FBF mode. Drag-sortable list showing FBF frames as a collapsible group alongside detached layers. Thumbnails, badges, filter toggles, inline rename (F2).
- Unified Context Menus — Composable context menu system (
contextMenuBuilders.ts). Shared across LayerList, FrameByFrameView, and FrameLayerPanel.
🔧 Architecture
- Figma-first layer ordering — FBF clip reorder now sends
REORDER_NODESto Figma and receivesFRAME_CHILDRENback as the single source of truth. No more optimistic order patching that drifts out of sync. - Robust parent frame resolution —
REORDER_NODESresolves the parent frame by explicit ID instead of relying on Figma selection, which broke when child frames were selected.
🐛 Fixes
- Fixed reordering layers not syncing to Figma when FBF clips include Frame-type children.
- Fixed drag-and-drop jumpiness caused by nested DndContext and unstable order values.
- Fixed
documentchangeecho during reorder viaisReorderingLayersflag.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v2.0.0
🏗️ Architecture
- Unified Rendering Pipeline — ALL rendering flows through exactly two functions:
computeFrameAtTime()(UI) andapplyChildTimelineAtTime()(plugin). Scrubbing, playback, export, parent preview, undo/redo, and FBF mode all share the same code path. Zero duplicated rendering logic. - Registry-Based Modifier System — Replaced all switch/case dispatch with function registries (
registerApplyFn,registerPreProcessTimeFn,registerSideEffectHandler). Adding a new modifier requires zero changes to dispatch code. - Deleted Legacy Fallback — Removed old field-pattern-matching modifier dispatch (
applyStrokeTrimToNodeduplicate,if ('start' in fields)sniffing) from the APPLY_FRAME handler. - Generic Side-Effect Handling — Side effects (e.g., stroke dash pattern) dispatch via registered handlers instead of hardcoded
if (effect.type === 'strokeTrim')branches.
✨ Features
- Clip System — Child frames compose into parent timelines via time-bounded clips with start/duration offsets, speed multipliers, and configurable loop modes.
- Per-Clip Loop Mode Override — Right-click a clip → Loop Mode → Auto (inherit) / Once / Loop / Ping Pong. Auto re-syncs from the child timeline's actual loop setting.
- Virtual Clip Extension — Clips repeat to fill remaining timeline duration. Virtual segments stop at the next main clip on the same layer. Removed the old 8-repeat cap; now uses remaining time with a 200-segment render cap for DOM performance.
- Global Pick Mode — Unified layer picker overlay for selecting target layers in modifier fields (Follow Path path, Copy Animation source).
- Multi-Clip Drag — Selecting multiple clips and dragging (mouse or G key) moves them all together with correct relative offsets.
- Combined G/S Key — When both keyframes and clips are selected, pressing G (grab) or S (scale) fires both operations simultaneously.
- Layer Lock Propagation — Locked layers propagate the lock state to their clips. Explicitly locked clips show a 🔒 icon.
- Frame-by-Frame Duration Fix — FBF timelines correctly calculate duration from clip structure, not just frame count.
🐛 Fixes
- Child Clip Text & Morph Animation — Nested child timelines now correctly apply text states and morph keyframes during parent preview/export.
- FBF Clip Duration — Fixed FBF clips using wrong duration source when calculating inner time.
- Clip Race Condition — Fixed
pendingClipActionresponding from multiple selected clips simultaneously. Now only the first selected clip (by sorted ID) handles the action.
🔧 Refactoring
- Extracted
getSelectedSiblingClipStarts()helper inuseClip.ts(removed duplication between mouse drag and G-key grab). - Extracted
toNestedTimelineMap()helper inApp.tsx(replaced 3 duplicate Map constructions). - Removed dead
snapTimecallback fromuseClip.ts. - Removed duplicate
export defaultfromPickModeOverlay.tsxandLayerLinkField.tsx. - Deleted
LayerLinkField.tsx.bak.
📚 Documentation
- Updated ARCHITECTURE.md: fixed Known Limitations (morph & color are implemented), added modifier system, clip system, unified pipeline, and special track sections.
- Updated MODIFIERS.md: replaced "wire into switch" instructions with registry-based approach.
- Updated AI_GUIDELINES.md: added modifier development pattern, expanded property addition steps.
- Updated USAGE.md: added Anchor Points, Vector Morphing, Text Animation, Modifiers sections; updated property groups table and keyboard reference (G, S, M keys).
- Updated VISION.md: added Phase 5 (modifier system, discrete keyframes, fill color, image filters, clips, FBF mode, unified pipeline).
- Updated DISCRETE_KEYFRAMES.md: marked as IMPLEMENTED with status header.
- Updated STROKE_ANIMATION.md: marked as IMPLEMENTED with link to MODIFIERS.md.
- Added cross-linking navigation table to ARCHITECTURE.md.
📦 Installation
- Download
motionkit.zipfrom the assets below - Extract the ZIP file
- In Figma Desktop → Plugins → Development → Import plugin from manifest...
- Select the
manifest.jsonfile from the extracted folder - Open any Figma file → Plugins → Development → MotionKit
Note: MotionKit requires Figma Desktop app for development mode.
MotionKit v1.2.5
Release v1.2.5