v8.0.0-rc01

🚨 Note!

• Embla dropped IE11 support in v.7.0.0 but it was only an Object.assign() polyfill away. With the v8.0.0 release, Embla uses modern browser features so if there are any devs out there that still need to support IE11, this version of Embla isn't for you.

👋 Introduction

Thanks to a generous anonymous donation, I was able to spend two and a half days on this project, instead of 15 minutes here and there of my worst time during a day. The result - All the following improvements without any increase in bundle size!

Thank you very much anonymous donator out there 💵❤️!

Please note that although this is a pre-release, the changes in this release are here to stay. However, I might choose to include a little more in the final v8.0.0 release.

🌟 New features:

A new physics engine

• #387 - Inconsistent animation speed depending on monitor refresh rate (thanks @macjuul)

Embla animations are now frame rate independent! No matter if your screen has a refresh rate of 30Hz, 60Hz, 120Hz or anything else, the animation durations will be the same.

I've replaced the old attraction physics model with a new more flexible one. The previous model was hard to reason with. In contrast, the new attraction model feels more natural. The speed of scrolling is now always proportional to how vigorous the drag gestures are.

The new watch concept

This release introduces the new watch concept. Devs now have three new options:

• #159 - Add watchResize and watchSlides options (thanks @ej-mitchell)
• #416 - Add watchDrag option (thanks @peacepostman)

watchResize

Embla is no longer listening to the window resize event. Instead, it's using ResizeObserver on its container and slides. If any size has changed it will re-initialize by calling reInit automatically. Default is:

{
  watchResize: true,
}

You can opt out of the default Embla resize behaviour like so:

{
  watchResize: false,
}

However, you can also pass a callback function to watchResize like so:

{
  watchResize: (emblaApi: EmblaCarouselType, entries: ResizeObserverEntry[]) => {
    // do your own thing here BEFORE Embla runs its internal resize logic

    return true // <-- Return true if you want Embla to continue with its default resize behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default resize behaviour
  },
}

watchSlides

This new option adds the feature of Embla automatically re-initializing by calling reInit when slides have been added or removed, using MutationObserver. Default is:

{
  watchSlides: true,
}

You can opt out of the default Embla slides changed behaviour like so:

{
  watchSlides: false,
}

However, you can also pass a callback function to watchSlides like so:

{
  watchSlides: (emblaApi: EmblaCarouselType, mutations: MutationRecord[]) => {
    // do your own thing here BEFORE Embla runs its internal slides changed logic

    return true // <-- Return true if you want Embla to continue with its default slides changed behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default slides changed behaviour
  },
}

watchDrag

This new option adds the possibility to cancel the default drag behaviour. For example, it's useful if you need to disable dragging when a user wants to scroll an element inside a slide. Default is:

{
  watchDrag: true,
}

You can opt out of the default Embla drag behaviour like so:

{
  watchDrag: false,
}

However, you can also pass a callback function to watchDrag like so:

{
  watchDrag: (emblaApi: EmblaCarouselType, event: MouseEvent | TouchEvent) => {
    // do your own thing here BEFORE Embla runs its internal drag logic

    return true // <-- Return true if you want Embla to continue with its default drag behaviour

    // ...OR:

    return false // <-- Return false if you want Embla to skip its default drag behaviour
  },
}

🛠️ Bugfixes

• #90 - Drag threshold is too high on wide screens (thanks @silllli for the help)
• #387 - Inconsistent animation speed depending on monitor refresh rate (thanks @macjuul)

💥 Breaking Changes

• #416 - Add watchDrag option (was named draggable before this release) (thanks @peacepostman)
• #462 - Add emblaApi as a first parameter to event listeners
• #387 - Inconsistent animation speed depending on monitor refresh rate (the previous speed option is now duration)
• The default value of containScroll options has changed from '' --> null.

❌ Features removed

• The clickAllowed() method has been removed because it's now handled automatically.

Donations

Embla Carousel is an open source MIT licensed project. If you are interested in supporting this project, please consider:

• One-off donation via PayPal
• One-off/monthly donations via Ko-fi

---

What's Changed

• Add watchResize and watchSlides options by @davidjerleke in #449
• Bugfix #387 by @davidjerleke in #459
• Bugfix #90 by @davidjerleke in #460
• Add watchDrag option by @davidjerleke in #461
• Add emblaApi as a first parameter to event listeners by @davidjerleke in #463

Full Changelog: v7.1.0...v8.0.0-rc01