[Help]: Even smoother animations w Auto Scroll plugin? (on mobile especially)

[spencercap]

Summary

Hi David ~ GREAT JOB w Embla 👏 I'm wondering if you know of any magical tips to help my implementation be even more smooth. Autoscroll is sometimes a bit stuttery even with speed 1 [https://kind-agency.pages.dev/]

If applicable, which variants of Embla Carousel are relevant to this question?

• 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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

XXX

[davidjerleke]

Hi @spencercap,

Thanks for the kind words — really glad you’re enjoying Embla! 🎉

I had a look at your implementation, and one thing that can impact animation smoothness (especially on mobile) is the use of certain CSS properties that trigger expensive paint and composite operations. In your case, these two in particular can cause heavy calculations in the browser when elements are constantly moving — even if you’re using translate3d() for GPU acceleration:

.card {
  /* ... */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  /* ... */
}

Both box-shadow and backdrop-filter are quite costly to render in real time. If possible, you might try reducing or removing them while scrolling (e.g., applying them only on hover or when the animation stops). That could help the auto scroll feel smoother, particularly on lower-end devices.

Hope that helps.

[davidjerleke]

is there anything else to be done on the embla side though?

@spencercap do you mean code changes to the plugin that could improve performance?

[spencercap]

@davidjerleke it is working quite well! i am just wondering if you have any performance tips

[davidjerleke]

@spencercap do you mean in general? Specifically for AutoScroll or in general when using Embla?

[spencercap]

@davidjerleke I mean for the AutoScroll plugin in particular. not sure it it's using request animation frames for 1px incremental ticks to move the track along or CSS animations or what but it's quite performant! i am just evaluating use for a client project and also considering making a similar scrolling plugin for smooothy [https://smooothy.vercel.app/] as it gives some nice more verbose details about the slides state. did another test w Embla + Intersection Observer that was pretty slick too. just trying to make it feel as buttery as possible 😉

[davidjerleke]

@spencercap The Auto Scroll plugin uses requestAnimationFrame under the hood and advances the scroll position incrementally on each frame (rather than relying on CSS animations). It moves 1px per tick and accounts for different frame rates.

When you mention:

“as it gives some nice more verbose details about the slides state?”

Could you clarify what you mean by that?