Log inGet Started

Triggers

Control when and how animations play with built-in trigger types.

Triggers determine when a timeline plays. Chain a trigger method directly after defining your animation:

typescript 
import { Motion } from "@motion.page/sdk";

Motion("fade", ".hero", {
  from: { opacity: 0, y: 40 },
  duration: 0.8,
  ease: "power2.out",
}).onPageLoad(); // ← trigger

Every timeline needs exactly one trigger. Without a trigger the timeline is built but never started.

Available Triggers

Motion.page provides 8 trigger methods and 2 specialized modes.

  • .onPageLoad(config?) — plays when DOM is ready → Page Load
  • .onScroll(config?) — scroll-based playback & scrubbing → Scroll Trigger
  • .onHover(config?) — plays on mouseenter/mouseleave → Hover
  • .onClick(config?) — toggles on click → Click
  • .onMouseMove(config?) — cursor-driven progress → Mouse Movement
  • .onGesture(config) — pointer, touch & wheel gestures → Observer & Gesture
  • .onCursor(config) — custom animated cursor element → Custom Cursor
  • .onPageExit(config?) — plays before navigating → Page Exit

Specialized modes:

Quick Examples

Play on page load

typescript 
Motion("hero", ".hero-title", {
  from: { opacity: 0, y: 40 },
  duration: 0.8,
  ease: "power3.out",
}).onPageLoad();

Animate on scroll

typescript 
Motion("parallax", ".section", {
  to: { y: -100 },
  ease: "none",
}).onScroll({
  start: "top bottom",
  end: "bottom top",
  scrub: true,
});

Toggle on click

typescript 
Motion("menu", "#nav-dropdown", {
  from: { height: 0, opacity: 0 },
  duration: 0.35,
  ease: "power2.inOut",
}).onClick({ target: "#menu-btn", toggle: "reverse" });

React on hover

typescript 
Motion("card-lift", ".card", {
  to: { y: -8, boxShadow: "0 20px 40px rgba(0,0,0,0.2)" },
  duration: 0.25,
  ease: "power2.out",
}).onHover({ onLeave: "reverse" });