v1.1.0

Closer AOS parity, a standalone CDN build, and a round of lifecycle fixes. Works with Motion 12.23.3 and later, including 13 and 14.

npm i motion-on-scroll@1.1.0

Behaviour changes to be aware of

• Reduced motion: visitors who prefer reduced motion no longer get animations unless you pass respectReducedMotion: false.
• ease, flip-left and flip-right look different from 1.0.0, because they now match AOS: ease is the CSS ease curve, and the flips rotate in AOS's direction with AOS's perspective.
• Custom animations: MOS now applies delay / data-mos-delay for registerAnimation animations itself, so the factory receives opts.delay as 0. Existing factories keep working; new ones should not pass a delay to animate().

New

• CDN build: dist/mos.global.js works from a plain <script> tag. It bundles Motion and exposes a global MOS (including MOS.animate), the same way AOS exposes AOS.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-on-scroll@1.1.0/dist/mos.css" />
  <script src="https://cdn.jsdelivr.net/npm/motion-on-scroll@1.1.0/dist/mos.global.js"></script>
  <script>
    MOS.init();
  </script>

• MOS.destroy() removes all listeners and observers and stops tracking elements.

• Events: mos:in / mos:out on document (plus mos:in:<id> / mos:out:<id> with data-mos-id), matching AOS's aos:in / aos:out.

• AOS options: initClassName, animatedClassName, useClassNames, and anchorPlacement as a global option.

• respectReducedMotion option (default true).

• Stylesheet now applies only on screen and to html:not(.no-js), like AOS, and shows every element when printing. Selector specificity is unchanged. It is also available as motion-on-scroll/mos.css.

• Types (MosOptions, PartialMosOptions, ElementOptions, AnchorPlacement, DeviceDisable, AnimationFactory, EasingDefinition) are exported from the entry point.

Fixed

• Adding or removing a data-mos element, or calling refresh(), refreshHard() or init() again, no longer resets and replays every element that had already animated in (including once elements).
• mos-animate is now removed when an element animates out.
• Repeated init() calls merge options like AOS does, no longer duplicate listeners, no longer produce a 400 second duration with timeUnits: "s", apply a changed throttleDelay, and honour disable every time.
• Disabling after elements were scrolled out of view no longer leaves them invisible.
• data-mos-delay / delay no longer corrupts the animation when an element animates out: the delay applies on the way in only, as in AOS.
• Trigger positions are recalculated once the page has fully loaded, so late-loading images no longer leave them stale (as in AOS).
• Elements waiting below the fold no longer keep a 60fps frame loop running.
• An element with an inline data-mos-anchor-placement and no inline offset triggers where AOS triggers it.
• cubic-bezier() easings with negative control points (overshoot curves) are accepted.
• Empty data-mos="" and data-mos-easing="" attributes fall back to the defaults.

Pull requests

• Modernize: dependency upgrades, AOS parity fixes, CDN build (#10)
• Fix release workflow: use workspace:* for the docs' library dependency (#11)
• Version Packages (#12)

Docs: https://motion-on-scroll.pages.dev
Full changelog: v1.0.0...v1.1.0

v1.0.0

What's Changed

• v1.0.0 prep by @Boston343 in #7
• Version Packages by @github-actions[bot] in #8

Full Changelog: v0.0.6-beta...v1.0.0

v0.0.6-beta

What's Changed

• Improvements by @Boston343 in #5
• Version Packages by @github-actions[bot] in #6

Full Changelog: v0.0.5-beta...v0.0.6-beta

v0.0.5-beta

What's Changed

• Refactor to use AOS type logic for viewport detection... by @Boston343 in #1
• Update init, refresh, and refreshHard functions... by @Boston343 in #2
• Much improvement, very wow by @Boston343 in #4
• Version Packages by @github-actions[bot] in #3

New Contributors

• @Boston343 made their first contribution in #1
• @github-actions[bot] made their first contribution in #3

Full Changelog: https://github.com/Boston343/motion-on-scroll/commits/v0.0.5-beta