search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.8k stars 175 forks source link

Embla + Framer Motion + Flubber makes slides "disappear" #317

Closed MartinConde closed 2 years ago

MartinConde commented 2 years ago

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

  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 commented 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

MartinConde commented 2 years ago

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 commented 2 years ago

I'm keeping this open until the release of:

davidjerleke commented 2 years ago

Hello @MartinConde,

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

Cheers, David

davidjerleke commented 2 years ago

Released with v7.