search

gutiguy / react-spring-3d-carousel

A 3D Carousel component for images built with React and utilizing react-spring for controlling slide transitions.
MIT License
102 stars 50 forks source link

edge slide animation effect doesnt work with some "slide count" & "offsetRadius" combination #47

Closed lumosmind closed 1 year ago

lumosmind commented 2 years ago

slide count - ofset radius - isWork 3 ---------- 2 ---------- yes 4 ---------- 2 ---------- no example code 5 ---------- 2 ---------- yes

gutiguy commented 1 year ago

The first and third examples work because all the slides are always rendered on the page, so you get the full animation effect when navigating around them (nothing new gets mounted on navigation). The second example has no animation on the edge slides because the offset radius gets clamped to 1. Otherwise, the same slide would be visibly rendered twice. So "new" slides get mounted on the edges as you navigate, with no animations. If you wish to maintain the slide effect and don't mind rendering the same slide twice, you can pad the array by duplicating an extra slide.

gutiguy commented 1 year ago

Closing this issue due to inactivity. I might introduce an ability to inject dynamic animations for the slides at the edges as they mount when (and if) I have the time (a PR for such a feature would be super appreciated - just let me know if you want to develop it yourself and need any help ;)).