Embla + Framer Motion + Flubber makes slides "disappear"

[MartinConde]

Bug is related to

Using Embla in combination with Framer Motion and Flubber

Embla Carousel version

• v6.2.0

Describe the bug

Not really a bug, more like something I can't seem to figure out.

Basically, I've got images with a clippath inside my slides. When a slide becomes active, the clippath transitions to another shape using flubber and framer motion. This part works just fine.

The issue is that slides become "invisible" at times but show up after a second or so. While sliding through, slides will be dropped and re-appear. If I comment out the svg, the sliding works perfectly again.

I've tried playing with re-initting the slider at different points but can't figure out where I'm going wrong. I'm aware that this issue isn't emblas "fault" but figured I'd ask in case someone has an idea.

CodeSandbox

https://codesandbox.io/s/embla-framer-test-llgvds?file=/src/components/EmblaCarousel/slide.js

Steps to reproduce

1. Checkout the CodeSandbox, preferably in full screen mode so it's easier to see the issue with the transitions.
2. Open slide.js and remove or comment out the svg (marked with a comment in the code)
3. Re-open CodeSandbox in full screen mode and see the difference

Expected behavior

Slides shouldn't drop/disappear, basically all should work like it does when the svg is removed

[davidjerleke]

Hi @MartinConde,

Look at this:
The upcoming version 7 of Embla seems to solve this. I've created a CodeSandbox with the v7 release candidate and the slide disappearing isn't happening.

I'm guessing that both Embla is manipulating elements when looping slides, and Framer Motion + Flubber is also doing that so some things were conflicting because of this. It's worth noting that v6 is working fine without Framer Motion + Flubber so this can probably be solved with v6 if you were to change the order of doing things.

Embla v7 uses px as unit instead of %. Maybe the absolute px unit is more resilient towards multiple libraries manipulating elements and reading their rects etc. One thing that's clear though is that it's beneficial for this case. Here's the specification for v7:

• ⭐ v7 #298

Best,
David

[MartinConde]

Hi @davidjerleke

Awesome thanks a lot, guess I'll just go for v7 then. Would love to figure out the solution in v6 but been fiddling with it a lot and no patience for now to keep trying if v7 fixes it perfectly.

[davidjerleke]

I'm keeping this open until the release of:

• ⭐ v7 #298

[davidjerleke]

Hello @MartinConde,

If you're interested: v7.0.0-rc01 has been released.

Cheers,
David

[davidjerleke]

Released with v7.