Animation System MVP — TODO

Branch: add-animation-system (AF, CE, Composer) Status: In progress — testing phase Updated: 2026-03-13

Priority 1: Bugs & Safety

• [x] CE: will-change listeners never removed — Fixed: stored handler refs, cleanup in beforeUnmount()
• [x] CE: sanitize blockName in CSS keyframe names — Fixed: added sanitizeBlockName() in helpers.ts
• [x] CE: Choice.vue null safety — Fixed: guard on triggerType && targets before destructuring
• [x] Composer: duration falsy coalescing — Fixed: changed to ?? operator

Priority 2: Scope Cleanup (MVP)

• [x] AF: Remove scroll trigger — Removed from types.ts, AnimationTriggerSection.vue, en.js
• [x] CE: Remove scroll trigger handling — Removed IntersectionObserver code and animationObserver from AnimationMixin
• [x] AF: Add FlowAnimationTriggerType — Added to types.ts
• [x] AF: Exclude all triggers on Conversation — Conversation block has its own message animation system (MessageHolder opacity + typing). Block-level AnimationMixin animations don't work because messages have individual opacity: 0 that overrides block-level effects. Added excludeTriggers: ['load', 'hover', 'click'].

Priority 3: DRY & Code Quality

• [x] AF: Move AnimationConfigCard bindings to mixin — Added animationCardProps + animationCardListeners to configurationLogic.ts, updated all 8 configs
• [x] AF: Centralize easing presets — Moved to defaults.ts as EASING_PRESETS, EASING_PRESET_VALUES, FLOW_EASING_OPTIONS
• [ ] AF: Replace hardcoded colors with SCSS variables — 40+ hardcoded hex colors across animation components. Deferred (cosmetic, not blocking MVP).
• [x] CE: BezierEasingEditor copyTimeout cleanup — Added clearTimeout in beforeDestroy()
• [x] AF: Card.vue title-actions slot — Was missing, causing AnimationConfigCard copy/paste buttons to never render. Added <slot name="title-actions" />.
• [x] AF: Copy/paste SVG icons — Replaced CIcon-based buttons with inline SVGs matching BezierEasingEditor style. Copy shows checkmark for 1.5s after click.

Priority 4: Future-Proofing

These don't need implementation now, but the type system should accommodate them.

• [x] Types: Reserve text animation effect types — Comments added in both AF and CE types
• [x] Types: Reserve scroll-progress trigger — Comments added in both AF and CE types
• [x] Types: Reserve per-effect easing — Comments added in both AF and CE types
• [ ] CE: Verify AnimationMixin extensibility — Confirm text-level animations can be added without changing the mixin interface. Deferred to Rich Text Formatting implementation.

Priority 5: Bugs Found During Testing

• [ ] AF: Flow animation duration doesn't persist — User sets duration to 1500ms, but it resets to 500ms when reopening the panel. Root cause found: OperatorBase.vue has watchers for all operator body properties (stylesText, inputText, etc.) that trigger undoRedoCheckpointSave(), but there is NO watcher for op.properties.body.animationTrigger.value. Fix: add watcher in OperatorBase.vue watch section:

  'op.properties.body.animationTrigger.value': {
    handler() {
      this.undoRedoCheckpointSave()
    },
  },

• [ ] CE: Click trigger only fires once — "On Click" animation plays the first time but not on subsequent clicks. Needs investigation in AnimationMixin click handler — likely needs to remove and re-apply the animation (or reset it via el.style.animation = 'none'; reflow; el.style.animation = ...).
• [ ] AF: Conversation block can't animate on appear — Known limitation. Conversation messages have their own opacity: 0 → visible lifecycle in MessageHolder.vue. Block-level animation can't override individual message opacity. Accepted for MVP, excluded triggers. Future: hook into MessageHolder lifecycle for per-message composable animations.

Priority 6: Testing

Tested (2026-03-13, by Nicolay):

Triggers:

1. [x] On Load on button — fires on preview ✓
2. [x] On Hover — plays on hover ✓
3. [x] On Click — plays on first click ✓ (but does NOT re-trigger on subsequent clicks — see bug above)

Effects: 4. [x] Multiple effects (fade + slideX + scale) — combine correctly ✓ 5. [x] Multi-step keyframes (0%, 50%, 100%) — smooth ✓

Presets: 6. [x] Presets (fadeIn, bounce, elastic) — look correct in preview ✓ 7. [x] Modified preset — indicator shows correctly ✓

Cubic-bezier: 8. [x] Drag control points — preview updates ✓ 9. [x] Preset selection (ease-in-out, bounce) — curves snap correctly ✓

Copy/paste: 10. [x] Copy from one block, paste to another — works ✓ (paste visible on all blocks, trigger preserved if compatible)

Flow animations: 11. [x] On Appear trigger from operator — plays in preview ✓ 12. [x] On Click on choice — target block animates ✓ (duration persistence bug — see P5)

Not yet tested:

13. [ ] Different block types — test on text, graphic, video to verify they all work the same
14. [ ] Standalone preview — build creative and open standalone preview, verify animations fire
15. [ ] External site embed — build creative, embed on test page, verify animations work
16. [ ] Composer test cases — animation trigger parsing, legacy migration, invalid JSON, edge cases

---

Progress Log

Date	What	Status
2026-03-13	Full code review (AF, CE, Composer)	Done
2026-03-13	TODO list created	Done
2026-03-13	P1: All bugs fixed (CE + Composer)	Done
2026-03-13	P2: Scroll trigger removed, FlowAnimationTriggerType added	Done
2026-03-13	P3: DRY refactor (mixin bindings, easing presets, timeout cleanup)	Done
2026-03-13	P3: Card.vue title-actions slot + copy/paste SVG icons	Done
2026-03-13	P4: Future-proofing comments in types (AF + CE)	Done
2026-03-13	P2: Conversation block exclude all triggers	Done
2026-03-13	P5: Flow duration bug root-caused (missing watcher in OperatorBase)	Documented
2026-03-13	P5: Click re-trigger bug identified	Documented
2026-03-13	P6: Manual testing items 1-12	Done
2026-03-13	All three repos build successfully	Verified
2026-03-13	AF changes committed and pushed	Done

Next Session Checklist

1. Fix flow duration persistence — Add animationTrigger.value watcher in OperatorBase.vue
2. Fix click re-trigger — Reset animation in AnimationMixin click handler
3. Test items 13-14 — Different block types + standalone preview
4. Build and test on external site — Item 15
5. Create Composer PR — Branch add-animation-system has changes but no PR yet
6. Mark PRs ready for review — AF #1806, CE #706, Composer (new)