fx‐move.js - humanbit-dev-org/templates GitHub Wiki

This script triggers CSS-based animations on elements grouped into two separate animation sequences:

• Ready group (.fx elements without .wait)

• Wait group (.fx.wait elements)

The Ready group animations trigger first.

The Wait group animations trigger only after all animations in the Ready group have fully completed.

---

Class(es)	Behavior
.fx	Animations trigger immediately and simultaneously within their group.
.fx.cascade	Animations trigger sequentially, each element after the previous .fx or .fx.cascade animation has fully completed. If there's no preceding .fx, the first .fx.cascade behaves like .fx.
.fx.cascade.delay	Same as .fx.cascade, but with a small initial delay before starting each animation. Special case: if there's only one visible .fx.delay element, it triggers immediately to prevent layout issues (especially useful on mobile).
.fx.delay	Animations trigger with a staggered delay starting from the first .fx. If no .fx exists, stagger starts from the first .fx.cascade or .fx.cascade.delay. If neither exists, .fx.delay acts as if an .fx was present. Special case: if there's only one visible .fx.delay element, it triggers immediately to prevent layout issues (especially useful on mobile).

---

• Both "Ready" and "Wait" groups follow the same rules and behaviors outlined above. The only difference is that the "Wait" group starts animating after the "Ready" group has fully finished.

• The "Wait" group's animation sequence begins only after the entire "Ready" group's animation sequence fully completes.

This ensures predictable, visually consistent, and versatile animation flows.