The two modes
- Anchored: tied to a DOM element. The checkpoint’s position is computed at runtime from the element’s actual location, plus an optional offset.
- Absolute: tied to a fixed Y coordinate in pixels from the top of the page. Doesn’t move when the page reflows.
Anchored is the default and the right choice for most situations. Absolute exists for the rare case where you need a fixed position regardless of content.
Anchored markers
When you create a scroll checkpoint by dragging it to a position on the page, Glopzi finds the nearest DOM element to that position and anchors the checkpoint to it. Three pieces of information are stored:
- The anchor element: a CSS selector for the element the checkpoint follows.
- The position on the element:
top,center, orbottom. Where on the element the checkpoint sits. - An optional offsetin viewport-height units (vh) or pixels. Lets you place a checkpoint “30vh below the top of the hero” without anchoring to a separate element.
When the page reflows (responsive breakpoint switch, dynamic content load, image fully loaded), the checkpoint recalculates its position from the anchor’s new location. Animations that reference it follow without breaking.
Tip
Anchored is the right default because most layouts change in some way after first load. Sticky headers collapse, lazy-loaded images expand sections, font files arrive and shift line wraps. Anchored checkpoints absorb all of that.
Absolute markers
An absolute checkpoint stores a fixed Y coordinate. When the visitor scrolls past that pixel, the checkpoint fires regardless of what content is there.
Use absolute when:
- The anchor element no longer exists. Content was removed but you want the existing animation to stay where it was.
- You explicitly want a fixed scroll position.Rare, but for example: a checkpoint at “exactly 1200 pixels down, regardless of content”. Useful for testing or for scroll-distance-based effects.
- The page is heavily lazy-loaded and anchoring to any specific element would resolve unpredictably. Absolute pins it to where you put it.
Switching between modes
Open the checkpoint’s settings (right-click on the canvas or click the timeline tick). Toggle Mode between Anchored and Absolute.
- Anchored to absolute: Glopzi captures the current resolved Y as the absolute value. The checkpoint stays where it is, but stops following the anchor.
- Absolute to anchored: you pick an anchor element from a dropdown. Glopzi suggests the element nearest to the current Y. Confirm and the checkpoint locks onto it.
Switching is non-destructive: animations referencing the checkpoint continue to work either way.
Offset
Both modes support an optional offset that shifts the checkpoint up or down from its base position.
- For anchored: offset shifts the checkpoint relative to the anchor’s top, center, or bottom. Positive values move down; negative move up.
- For absolute: offset adjusts the stored Y coordinate. Effectively the same as editing the Y directly.
The unit is selectable: vh (viewport height) or px (pixels). vh is usually the right choice because it scales naturally across viewport sizes.
Note
A common pattern: anchor the checkpoint to a section, with offset -10vh from its top. The checkpoint sits 10% of the viewport above the section, so animations triggered by it start slightly before the section comes into view.
Next steps
- Creating and moving checkpoints covers the day-to-day mechanics.
- Coordinating multiple elements shows why shared anchors matter.
- Stable targeting covers the related concern of CSS selectors that survive builder changes.