[Feat]: Add duration and friction options on "drag" events.

[SolalDR]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

First of all thank you, I really like this slider lib and I use it all the time.
Recently I have repeatedly encountered the need to create a paralax effect, or to make the drag effect on the carousel heavier.

By manipulating the "duration" property value, I can create an interesting inertia effect giving a feeling of heaviness when clicking on the control buttons.
I think it's a shame we can't do the same thing with the drag behavior.

I realized that the desired effect could be reproduced by modifying a few lines of the DragHandler file.
For example, with a factor of 0.5 on the diffScroll, diffCross and diff variables in the move function, I can scroll the slider half as fast as the pointer, creating a parallax effect.

// embla-carousel/src/components/DragHandler.ts (line 151)
function move(evt) {
  const lastScroll = dragTracker.readPoint(evt);
  const lastCross = dragTracker.readPoint(evt, crossAxis);
  const diffScroll = deltaAbs(lastScroll, startScroll) * 0.5;
  const diffCross = deltaAbs(lastCross, startCross) * 0.5;
  if (!preventScroll && !isMouse) {
    if (!evt.cancelable) return up(evt);
    preventScroll = diffScroll > diffCross;
    if (!preventScroll) return up(evt);
  }
  const diff = dragTracker.pointerMove(evt) * 0.5;
  console.log(diff)
  if (diffScroll > dragThreshold) preventClick = true;
  scrollBody.useFriction(0.3).useDuration(1);
  animation.start();
  target.add(direction.apply(diff));
  evt.preventDefault();
}

And by directly adjusting the "baseSpeed" I can control the animation duration when the pointerUp event fired.

// embla-carousel/src/components/DragHandler.ts (line 68)
const baseSpeed = dragFree ? 43 : 60;

I would like to know if adding options for these two behaviors would be possible? For example, it could be adding a dragFactor and dragDuration option in the slider constructor.
Or maybe there is another way to reproduce a similar effect?

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[davidjerleke]

@tayteboss Thank you for the suggestion! Exposing physics options like mass, bounce, or dampening is unfortunately a lot of work. The reason is that these settings can easily break the carousel animations, which would lead to a large number of bug reports and a huge maintenance burden. I simply don’t have the spare time to manage that right now.

If this project were to receive decent funding, I would have the bandwidth to look into safely exposing physics configurations. Until then, it’s not something I can support.