[Help]: Animations add incorrect slides offset, but only sometimes

[rtivital]

Hi David! I've recently released @mantine/carousel package that uses embla under the hood. There is a minor issue – when carousel is rendered within a container that is animated on mount carousel slides get an unexpected offset (example – open modal and switch slides – https://codesandbox.io/s/reverent-sara-4bk0dg?file=/src/App.js).
I've also experienced a similar issue on mantine.dev home page demo.

The issue can be fixed by calling reInit with timeout (https://codesandbox.io/s/lively-flower-ts379u?file=/src/App.js). I'm not sure whether this issue is on my side, or if it is something that can be fixed in embla. Can you help us allocate the problem? You can find root issue here – mantinedev/mantine#2041

P.S. great work on the library, I've enjoyed building the package!

[davidjerleke]

Hi Vitaly (@rtivital),

Thank you for your question and congratulations on your new major version 5 release. I saw your release post on Reddit and it seems like devs are saying great things about Mantine in general and the new upgraded Mantine 5.0.0 🎉!

The problem

I think you correctly describe why this is happening here:

embla carousel is init before the animation ends which, I suppose, causes embla to calculate slides offset incorrectly.

...so nice catch 🙂. Embla Carousel works a bit different than other carousel libraries in the sense that it only reads slide positions and sizes (width/height) upon initialisation. If you compare with many other libraries, they set slide widths themselves and also add a lot of styling like position: absolute; and more. The only two DOM manipulations Embla does are the following (from v.7 and up):

• It sets translate3d on the container which creates the scroll effect.
• It sets translate3d on some slides that need to change position to create the loop effect - Only applies to carousels that have loop enabled.

As goes for any piece of software, design choices have pros and cons. The pros and cons of only reading slide dimensions and not setting them:

• Pros: Devs get nearly full control over their markup. They can pretty much use any markup and CSS they prefer.
• Cons: Devs have to watch out for cases where transforms and other stuff manipulate dimensions that will result in Embla not picking up the correct dimensions.

Possible solutions

One way to solve this when a modal is toggled open would be like this:

1. When you mount the modal to the DOM: Hide the modal outside the screen: For example with transform: translate(-100%);. Note that opacity: 0; can be applied at this stage because it doesn't affect dimensions of elements.
2. Init or reInit Embla.
3. Apply any modal styles that you want to apply before the modal transition starts (pre-animation stage styles).
4. Get rid of the out of screen styles added in step 1.
5. Start the modal transition and it should work as expected.

I didn't dive into your modal code so I don't know if this is doable for you without too much of a hassle.

Another way to solve it is as you mention running reInit() when the modal animation has finished, but this can cause the carousel to "jump" into correct position which doesn't look great.

If you have an alternative solution in mind, please feel free to share.

On a side note

P.S. great work on the library, I've enjoyed building the package!

Thank you! I hope that Embla has been easy to work with and didn't cause you too much of a headache 😅. If you haven't noticed already, I would like to mention that I recently released v7 of Embla. Many people have been wanting the breakpoints option so maybe it will make your life's easier too. Read more about that and the additional features here.

Let me know if this helps or not.

Best,
David

[rtivital]

Thanks for explanations, David! I've researched a little more and found out that reInit works only when called in useEffect, but when called with timeout from the function itself, it still has the offset (https://codesandbox.io/s/focused-darkness-iw4mmp?file=/src/App.js), super weird.

Anyway, I do not see any way of fixing it apart from calling reInit neither on your side, not on my side. So, I'll just introduce a new hook that will do this cleanup.

[davidjerleke]

@rtivital no worries. Yes that's weird. Maybe it has something to do with the way React 18 is batching updates (even timeouts)?

You might want to keep an eye on/or join this conversation by the way. Maybe it will solve what you want to achieve in the near future.

Cheers,
David

[rtivital]

I've solved that with useAnimationOffsetEffect hook, not ideal, but works
https://mantine.dev/others/carousel/#carousel-container-animation-offset

[davidjerleke]

Hi @rtivital,

Thanks for getting back to me. I’m glad you solved it temporarily.

As I mentioned in my previous comment, I would recommend you to join this conversation and share your opinion about it. That will probably solve this problem automatically and you can get rid of that hook plus the heads up in your documentation.

Best,
David

[davidjerleke]

Hi @rtivital,

Just wanted to let you know that the mantinedev/mantine#2041 (comment) here probably won't be needed in Embla v8 if the changes in this PR don't cause any unexpected problems:

• Make reading element dimensions work regardless of transforms #633

Cheers,
David

[rtivital]

Great, thanks! It has been causing some confusion

[davidjerleke]

Hello again @rtivital,

Just wanted to let you know that I released stable v8.0.0 yesterday and among many other improvements, this has been fixed:

• Make reading element dimensions work regardless of transforms #633.

Best,
David

[rtivital]

Great, I'll update the dependency in next minor release and will validate the fix. Thanks!

[davidjerleke]

@rtivital there are many changes and improvements in v8.0.0 so it might be worth to review your current internal setup and see if some things are redundant now, and if you need to adapt to some extent.

Thanks!
David