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.