Locomotive Scroll Versions Save

🛤 Detection of elements in viewport & smooth scrolling with parallax.

5.0.0-beta.12

2 weeks ago
  • Update Lenis dependency
  • Update to Lenis v1.0.45

v5.0.0-beta-11

5 months ago
  • Update Lenis to 1.0.29
    • Fix rootElement
  • Export styles and explicitly declare public exports

v5.0.0-beta.9

6 months ago
  • Update Lenis to 1.0.27 and support its new options
    • eventsTarget
    • syncTouch
    • syncTouchLerp
    • touchInertiaMultiplier
    • autoResize
  • Fix start()/stop() lenis methods not sync with core instsance

Getting closer and closer to a official release!

v5.0.0-beta.8

11 months ago

Subscribe scrollEventProgress option to attributes that need RAF

v5.0.0-beta.7

11 months ago

v5.0.0-beta.7 (2023-05-18)

What's new?

  • Now built on top of Lenis 🤝
  • Built in TypeScript for a better developer experience
  • Built-in viewport detection using browsers's native Intersection Observer API
  • Real time progress value for flexible scroll-based animation
  • Accessibly and performance more than ever

Contributors

4.1.4

2 years ago

4.1.4

4.1.3

2 years ago

4.0.3

3 years ago

4.0.2

3 years ago

4.0.0

3 years ago

Changelog

New features

  • Add horizontal scrolling (usage example: horizontal.html).
  • Update export to only import the native Class.
  • Update scrollTo parameters with the options object (offset, duration, easing...).
  • Add context system to set specific options for desktop , tablet and mobile separately.
  • Rewrite the instance options. Learn more
  • Add data-scroll-id="" attribute to select elements.
  • Add currents "in view" elements as object in the on scroll event.
  • Add a progress value from 0 to 1, while the element is in the viewport. Useful to play an animation for example. Learn more

Export updates It's now possible to only import the Native Class, if you don't want the smooth scrolling.

As usual, you can do like this:

import LocomotiveScroll from 'locomotive-scroll';

Or just import the Native Class:

import { Native } from 'locomotive-scroll';

And create your instance like before

// const scroll = new LocomotiveScroll(options);
const scroll = new Native(options);