[Help]: Carousel freezes when using transform with intersection observer from VueUse

[michaelprys]

Summary

I'm using the intersection observer from VueUse https://vueuse.org/core/useIntersectionObserver/ on the Carousel component. I want to add a fade-in-up (transform: translateY(20px)) class dynamically, when I intersect the carousel. However, after applying the transform, the carousel freezes and I can no longer interact with it. If I replace fade-in-up with the fade-in, which is an opacity transition from 0 to 1, everything works correctly. Could it be because Embla has some styles that conflict with custom css animtaions/transforms?

Below is the reproduction of the issue. I use shadcn-vue carousel, which is built with Embla. To see the issue try swiping in different directions and you will see that the carousel stops working and sometimes slides disappear. Navigation buttons won't work as well if add them. However, if you remove ref="target" from the <CarouselContent> or if you replace fade-in-up with a fade-in, it starts to work as intended:

Carousel.issue.with.transform.and.intersection.observer.mp4

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

https://stackblitz.com/edit/nuxt-starter-z2yqq6?file=app.vue

[davidjerleke]

@michaelprys thanks for your question. I don’t know what VueUse is doing under the hood but yes, it’s quite likely that it’s causing this. Here are two suggestions that could possibly solve your problem:

1. If you want to listen for which slides are in view, why don’t you use the built in Embla event slidesInView to achieve this? See this section in the docs (click on Vue tab). It’s using Intersection Observer under the hood.

2. As a rule of thumb, don’t add animation styles to the container or directly to the outer slide wrappers, because Embla will add transform: translate to the container to create the scroll effect, and to some slides to create the loop effect. Instead, create an element like a div inside the outer slide wrapper and add all your custom animations to that element instead.

Let me know how if it helps.

[michaelprys]

@davidjerleke, thank you for your response. I’m not sure if adding a div with :class="{ 'fade-in-up': isVisible }" inside <CarouselItem> is the optimal solution, as adding dynamic classes to a large number of items in a loop can potentially impact performance. However, it does solve the issue.

Since I’m using shadcn-vue, I’m following the 'Events' section here: https://www.shadcn-vue.com/docs/components/carousel.html. I believe using the slidesInView event will achieve the same result as my custom <Observer> component, but it's good to know this feature exists. I could also solve the issue by adding the observer to the <Carousel> instead of <CarouselContent>. However, in my case, I want to apply two different classes: fade-in-up to the whole carousel and fade-in to the <h1>Featured</h1> inside the carousel, which is positioned between the carousel navigation buttons, which are inside of the <Carousel> component, as shown in the video example I attached above. So applying a class to the <Carousel> would affect both the carousel and the <h1>, which is not what I want, and that's why I tried to add the observer specifically to the <CarouselContent>. Hope I described everything correctly.

[davidjerleke]

I’m not sure if adding a div with :class="{ 'fade-in-up': isVisible }" inside <CarouselItem> is the optimal solution, as adding dynamic classes to a large number of items in a loop can potentially impact performance. However, it does solve the issue.

@michaelprys I'm not sure you have realistic expectations. Embla makes minimal changes to the DOM. There are only two ways it affects the DOM:

1. It sets transform: translate3d to the container to create the scroll effect.
2. It sets transform: translate3d on slides that need to shift position in order to create the loop effect.

That's all and it's a lot less compared to most carousel libraries. As long as you don't apply styles that affects element positions on the container and the outer slide wrappers directly (transforms are still ok) you're fine. You can still add fade effects and similar to a wrapper that wraps the container and the first child element directly inside a slide.

I believe using the slidesInView event will achieve the same result as my custom <Observer> component, but it's good to know this feature exists.

I can guarantee that Embla only checks for elements in view, but I can't say anything about how the <Observer> component you mention works internally. Apparently, something in your implementation is altering the element offset dimensions or alternatively overriding the core Embla transforms.

[michaelprys]

@davidjerleke The <Observer> component only uses useIntersectionObserver composable from VueUse to provide an isVisible state through a slot. I created it to manage visibility for multiple elements, including carousels. The fade-in-up class applies an animation of opacity: 0 and transform: translateY(20px).

Here's the demo using slidesInView instead of VueUse composable:
https://stackblitz.com/edit/nuxt-starter-nuur6w?file=app.vue

My observations:

1. Applying animations directly to the outer slide wrapper causes the carousel to freeze, although slidesInView still triggers on swipe, as seen in the console.

2. When transform is applied directly to the outer slide wrapper <CarouselContent>, the carousel displays weird behavior, such as rolling from left to right on page load and creating a space in the middle of the carousel (you can see it in the demo above where I use active class with transform and transition, instead of an animation). Also, swiping is now delayed and some slides disappear.

3. Adding a div inside <CarouselContent> and applying animations to it makes the carousel work as intended. However, this setup makes the whole carousel behave as a single slide (I might be doing something wrong here, please tell me if you find an issue). Version with a div inside the outer slide wrapper:
   https://stackblitz.com/edit/nuxt-starter-jg4d2s?file=app.vue

From what I understand, the slidesInView event triggers when slides move within the carousel’s viewport and not when the carousel becomes visible when scrolling the page. Using the VueUse composable might be more suitable in my case, but I can't fix the issue I mentioned in point 3) above.

[davidjerleke]

@michaelprys regarding your observations 1-2 stated here, this is what I explained in both my first and second comment? This is expected behavior because of the reasons I’ve already explained twice in these comments. I don’t quite understand the point of claiming that these are your observations when this was the first thing I explained to you in my initial comment.

And for point 3 I’ve also explained that you can’t add animations to the container. You need an outer wrapper that wraps the <CarouselContent> component you describe.

If you didn’t, please take time to read my responses thoroughly. My time is very limited because I’m doing this on my unpaid spare time.

[michaelprys]

@davidjerleke

As long as you don't apply styles that affects element positions on the container and the outer slide wrappers directly (transforms are still ok) you're fine.

Regarding transforms where you said they're still ok to use. When I applied transform to the outer slide wrapper which is <CarouselContent>, the carousel experienced issues I described in point 2.

Instead, create an element like a div inside the outer slide wrapper and add all your custom animations to that element instead.

I created a <div> inside <CarouselContent> for applying animations, as you suggested. Since <CarouselItem> is a slide here, <CarouselContent> is the outer slide wrapper. This approach causes the carousel to behave as a single slide.

Solution:
When I wrapped <CarouselContent> with a <div> as you recommended in the last message, the carousel started functioning correctly.

Regarding my observations, I was simply describing what I experienced when applying the class to the wrapper. I understand that you had mentioned similar points earlier, but I wanted to describe what exactly happens if you do it so others can better understand the issue and find a solution.

I appreciate your time and help, hope it helps someone as well. Thank you for the response.

[davidjerleke]

@michaelprys I’m glad it got solved 👍🏻.