Glopzi
Sign up

Reference

Triggers reference.

The events that start a time-based animation. Pick one, optionally aim it at a different element than the one being animated, and you’re done.

The four triggers

Every Time animation has exactly one trigger. Glopzi has four:

  • In view (default): fires when the target enters the viewport.
  • Load: fires once when the page finishes loading.
  • Click: fires every time the target is clicked or tapped.
  • Hover: fires every time the cursor enters the target.

Set the trigger in the right panel of the animation. The editor’s preview reflects the trigger you selected, so you can verify the behavior live.

In view

The most common trigger and Glopzi’s default. The animation starts the moment the target element scrolls into the visitor’s viewport. By default, it fires once per page load: the element animates the first time it’s seen, and stays in its final state if the visitor scrolls away and back.

Use it for scroll reveals: hero entrances on long pages, card cascades, image fade-ins. Anything you want the visitor to discover as they read down the page.

Note

The threshold for “in view” is when about 10% of the element crosses the viewport edge. Tall elements trigger as soon as their top hits the bottom of the screen; short elements trigger as soon as they’re visible at all.

Load

Fires once when the page finishes loading (specifically after window.load, when all images and external resources have arrived).

Use it for opening sequences: hero text that should be part of the page’s introduction rather than waiting for scroll, attention-grabbing flourishes on the first fold, or staged reveals you want to start immediately.

Heads-up

On long pages, prefer in view for anything below the fold. A load-triggered animation on element 800 pixels down completes invisibly while the visitor is still reading the hero. They miss it entirely.

Click

Fires every time the target element is clicked or tapped. Repeats: each click runs the full animation from the start.

Use it for interactive flourishes: a button that scales when pressed, an icon that rotates on click, an accordion header that rocks slightly when expanded.

Click triggers also work on links and buttons that navigate. The animation fires before navigation, so short animations (under 200ms) complete fully before the browser leaves the page.

Hover

Fires every time the cursor enters the target. Repeats: each enter restarts the animation.

Use it for hover states that go beyond what CSS :hover can express: scaling with a custom ease, reveals on adjacent elements, color transitions across multiple stages.

Note

Hover triggers don’t fire on touch devices. Mobile users tap, not hover. Pair a hover-triggered animation with a click-triggered one (using breakpoint overrides) to provide an equivalent experience on phones.

Trigger element override

By default, the trigger element is the same as the target. Hover the heading, the heading animates. But sometimes you want the trigger and the target to differ:

  • Click a button to animate a card.
  • Hover a thumbnail to animate the larger image next to it.
  • Click a tab to animate the content panel below.

In the right panel, expand the trigger settings and set Trigger element to a different selector. The animation now plays on the target, but listens on the trigger element you chose.

Scroll animations don't use triggers

Triggers are a Time-animation concept. Scroll animations don’t need them because the scroll position itself drives the animation. Their start and end checkpoints define when the motion begins and ends.

For more on the scroll model, see Scroll-based animations.

Next steps