Motion on Scroll

Fade Animations

data-mos="fade"

data-mos="fade-up"

data-mos="fade-down"

data-mos="fade-left"

data-mos="fade-right"

data-mos="fade-up-right"

data-mos="fade-up-left"

data-mos="fade-down-right"

data-mos="fade-down-left"

Flip Animations

data-mos="flip-up"

data-mos="flip-down"

data-mos="flip-left"

data-mos="flip-right"

Slide Animations

data-mos="slide-up"

data-mos="slide-down"

data-mos="slide-left"

data-mos="slide-right"

Zoom Animations

data-mos="zoom-in"

data-mos="zoom-in-up"

data-mos="zoom-in-down"

data-mos="zoom-in-left"

data-mos="zoom-in-right"

data-mos="zoom-out"

data-mos="zoom-out-up"

data-mos="zoom-out-down"

data-mos="zoom-out-left"

data-mos="zoom-out-right"

Custom Animations

JavaScript

MOS.registerKeyframes("my-custom-keyframes", {
  opacity: [0, 1],
  rotate: [0, 360],
});

HTML

<div data-mos="my-custom-keyframes">
  my-custom-keyframes
</div>

my-custom-keyframes

bouncy animation

JavaScript

MOS.registerAnimation("bouncy", (el, opts) =>
  animate(
    el,
    { opacity: [0, 1], scale: [0.4, 1] },
    {
      type: "spring",
      bounce: 0.5,
      duration: opts.timeUnits === "s" ? opts.duration : opts.duration / 1000,
      delay: opts.timeUnits === "s" ? opts.delay : opts.delay / 1000,
    },
  ),
);

HTML

<div data-mos="bouncy">
  bouncy animation
</div>

JavaScript

MOS.registerEasing("bouncy", [0.68, -0.55, 0.265, 1.55]);

HTML

<div data-mos="fade-up" data-mos-easing="bouncy">
  fade-up w/ bouncy easing
</div>

fade-up w/ bouncy easing

fade-up w/ dramatic easing

JavaScript

MOS.registerEasing("dramatic", "cubic-bezier(0.25, 0.46, 0.45, 0.94)");

HTML

<div data-mos="fade-up" data-mos-easing="dramatic">
  fade-up w/ dramatic easing
</div>