menu

Popmotion

Help and discussion for Popmotion's animation libraries: Popmotion, Pose, React Pose, React Native Pose, etc

Channels
Team

My first React pose carousel

November 18, 2018 at 10:19pm

My first React pose carousel

November 18, 2018 at 10:19pm
Hey, I created yet-another slide-based Carousel using React pose.
My objective was to make it as pure as it can be: no built-in controls, no internal slide index state (the slide index is only controlled by props), no built-in classes, no complex structure (only a wrapper, a pose-draggable and that's it).
Slide styles (including margins) should be handled by the user and the carousel should figure it out. The only thing mandatory is implementing an `onSlideChange` prop that should react to slide index changes prompted by the carousel.
It should work with swipes, variable width slides, reformat on window resize and should also not intercept clicks on slides (it's a dirty hack using `onClickCapture` so I'm not sure I did it right).
Anyway, as non-pro developer I was curious if anything could be optimized, and if there was a way to get a callback on the `dragEnd` transition complete.
Many thanks!

June 27, 2019 at 11:03pm
I think your codesandbox got deleted?
  • reply
  • like

June 28, 2019 at 5:22am
Hey, thanks for your interest Alex. I reached my limit of the 50 free sandboxes, so I had to make choices. I « switched » to react-spring which felt more flexible for what I wanted to do:
  • reply
  • like

June 30, 2019 at 6:35pm
Wow that slider is silky smooth! I think you may have convinced me to rewrite my pose one in spring 😊😯
  • reply
  • like
Haha thanks! React-spring also made it relatively easy to add stagger, which is something I wasn’t able to do with Pose!
  • reply
  • like
Oh and it exists as a lib just in case this wasn’t obvious from the example! https://github.com/dbismut/react-soft-slider
  • reply
  • like