Closed MartinConde closed 2 years ago
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:
Best, David
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.
I'm keeping this open until the release of:
Released with v7.
Bug is related to
Using Embla in combination with Framer Motion and Flubber
Embla Carousel version
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
Expected behavior
Slides shouldn't drop/disappear, basically all should work like it does when the svg is removed