Declarative keyframes.

When you describe motion to a computer, you have two ways to do it.

• Delta. “At second 1, move 30 pixels up. At second 2, move 30 pixels more.” Each instruction adds onto the previous state.
• Declarative. “At second 1, the element is at Y=30. At second 2, the element is at Y=60.” Each instruction is independent and absolute.

They produce the same motion in simple cases. They diverge fast as soon as you add a third keyframe, an override, or another property.

Glopzi uses the declarative model. Every checkpoint declares where the element is at that moment, not how much it moved.

Concretely, when you set opacity to 0 at the start checkpoint and 1 at the end, Glopzi reads that as “at the beginning the element is invisible, at the end it is visible”. Not as “fade from current to invisible, then fade from invisible to fully visible”.

Empty values inherit. If you set opacity at the first and third checkpoints but leave the middle one empty, Glopzi interpolates linearly through the middle. The middle checkpoint isn’t magically “0 opacity” just because nothing was set; it’s “whatever the interpolation produces”.

• You can reorder keyframes safely.Each one stands alone. Moving the third keyframe to second position doesn’t cascade through anything.
• You can edit any keyframe independently. Bumping translate Y on the middle keyframe doesn’t affect what happens before or after.
• Properties don’t fight each other. Each property has its own line through the animation. Opacity at 50% can be the peak; translate at 100% can be the resting state. Both are absolute, both are independent.
• Multiple turns become trivial.Want a logo to spin three times? Set rotate at 0, 360, 720, 1080 across four keyframes. The declarative model says “the element is at this exact rotation here”, so 1080 unambiguously means three full turns.

Imagine each keyframe as a pearl on a string. The pearl marks where the element should be at that moment in the timeline. Glopzi draws straight lines between the pearls. Adjusting one pearl affects the lines that connect to it, but never the other pearls.

If you remove a pearl, the line jumps directly from the previous one to the next. If you add a pearl in the middle, you can pin the motion to a specific intermediate state without redoing anything.

The whole animation is just the path through the pearls, colored by easing curves between pairs. Nothing more.

• Confusing empty with zero.An empty field on a keyframe means “don’t set this property here, interpolate”. Setting it to 0 means “this property is exactly zero here”. They look the same in the field but behave very differently. When in doubt, the right panel labels show whether a value is set or inherited.
• Trying to add motion by adding deltas. If you want a heading to slide up by 60 pixels then up by another 60, set the second keyframe’s translate Y to 60 and the third to 120. Not to 60 and 60.
• Reusing checkpoints across properties without care. Two properties at the same keyframe both hit their values simultaneously. If you want them staggered, use per-property timing instead.

• Editing keyframes applies the model in practice.
• Scroll-based animations uses the same model on a scroll axis.
• Easing covers how the lines between pearls are shaped.