Issue with scroll3d transitionMode in v5

[emish89]

Bugs and Questions

Prerequisites

Feel free to delete this section if you have checked off all of the following.

• [x] I've searched open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of nuka-carousel

Describe Your Environment

codesandbox with nuka v5 and v4 (working fine)

Describe the Problem

I tried to upgrade to nuka carousel v5 and even in the codesandbox example I cannot have the "scroll3d" transition mode working fine. I have a flat carousel, no 3d transform. I read the documentation and I see that the property was removed but I don't know how to obtain it. Can we have back the scroll3d transitionMode?

Expected behavior: Work as in the v4 Actual behavior: flat carousel, no 3d effect

[ValGeorgiev]

Hey @emish89, sorry for the delayed response. Did you try using animation: "zoom" property? We are lacking on documentation about v5 and a proper migration guide, but I am working on it. Here is a link with an example

And the code snippet should looks something like this:

 <Carousel
    wrapAround={true}
    slidesToShow={3}
    animation="zoom"
    cellAlign="center"
  >
    <img src="/image1.png" />
    <img src="/image2.png" />
    <img src="/image3.png" />
    <img src="/image4.png" />
    <img src="/image5.png" />
  </Carousel> 

The reason to be removed is that it was kind of confusing to have transitionMode and animation properties, which are pretty similar. So we combined them.

Please let me know what you think.

[dohomi]

How is it possible to do any different animation instead of slide? I tried ease property but did not see any difference on the slider animation. @ValGeorgiev is the source code of the example visible somewhere?

[ValGeorgiev]

Hey @dohomi, I am looking to update the v5 documentation early next week and add more examples. Maybe later next week I need to finish the migration guide from v4 to v5. Currently there are 3 types of animations that nuka-carousel v5 is supporting. Regular slide, zoom slide and fade. You can enable zoom or fade, by adding animation={'zoom'} or fade property.

Regarding ease property currently its not supported in the v5 version. It's in our roadmap to add easing in v5.1. Unfortunately easing implementation was not easy to be migrated to v5, due to an old version of the library. So we are looking to add the integration from scratch in v5.1. If you need to use easing, you can use some of the v4 versions. We are looking to build it as soon as possible, you can see the progress of v5.1 here. We are appreciating any help.

The nextjs example can be found in the examples folder in the repo, here it is a link

[dohomi]

thanks @ValGeorgiev for your reply. I try to migrate away from Swiper.js and found your library so I was wondering if it would fit the need. Especially the effects bound me to that library that was the reason why I looked into the easing (even though I don't know if that goes into the same direction).

I will keep an eye open for the new documentation. Thanks!

[ValGeorgiev]

Hey all, the documentation about v5 is updated, please check the Readme. I am working on the migration guide from v4 to v5. I hope I can publish it next week.

[cabbage-cart]

Any word on that migration guide?

[ValGeorgiev]

Hey @cabbage-cart unfortunately I need more time to finish this. As there were some other priorities that came in between. Please let us know if you have any struggles with v5 and we can help. The documentation is updated and the types are set correctly.

[henrybabbage]

Just to follow up, I recall there being a prop to control the transition style for the slider, which I don't see anymore. I would like to transition between slides with a fade-in fade-out transition. Is this possible? Thanks!

[henrybabbage]

Just to follow up, I recall there being a prop to control the transition style for the slider, which I don't see anymore. I would like to transition between slides with a fade-in fade-out transition. Is this possible? Thanks!

Ignore me — I found what I was looking for under the animation prop :)

[carbonrobot]

This functionality or feature no longer exists in the current versions of Nuka