From Transitions to States: Expanding Viz Flowics animation model
Introducing a "3-phase" model for having Keyframes & Loop animations without breaking the existing functionality.








Understanding what to solve
Viz Flowics animations were purely event-driven
Elements animated only when switching between visible and not-visible states (IN-OUT). But broadcast designers think in three parts: Intro, Ongoing, Outro. Without a middle state, the product could not support looping or continuous animations, creating a gap compared to tools like After Effects, Loopic, Viz Artist, and Singular.
Users were pushed toward workarounds such as pre-rendered video to create motion the system could not natively support.
My proposal
Build a three-phase model on top of what already worked.
I started by researching how broadcast designers think about animation lifecycles and where competitor tools already supported them. I then traced the gap back to the event-driven architecture: Overlays animate on switch, Lists animate on page change, and Text animates on value change. None had a concept of “staying active.”
The key insight was that the existing transitions system was already keyframe-based internally, just hidden from the user. I proposed evolving every animation type—Overlay, Pagination, and Update—to a three-phase Enter, Active, Exit structure, preserving backward compatibility with existing graphics and the animation library.
The outcome
A path to living graphics without breaking existing workflows.
The proposal was approved and moved into phased implementation, with the first phase’s mocks finalized before I left the company. It opened a path to looping and continuous “living” graphics, a frequently requested feature, while keeping the product’s existing animation tabs and event-driven logic intact.
Context
Users were asking to have a more powerfull animations editor. At the same time, competitors were offering more advanced looping and continuous animation features.
Role
I designed the proposal solo, combining product research, systems thinking, competitive analysis, and interaction design.