Skip to content

v1.1.0

Latest

Choose a tag to compare

@Boston343 Boston343 released this 05 Oct 13:55
9bea482

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