React Spring Carousel

React Spring Carousel

Axis animation

If you've already look into the react-spring useTransition docs, probably you've already found that, if you want to create a slideshow with translate animations, you need to pass something like this:


  useTranstion(item, {
    from: {
      transform: 'translateX(-100%)';
    },
    enter: {
      transform: 'translateX(-0%)';
    },
    leave: {
      transform: 'translateX(100%)';
    }
  })

which translated into the library config, it means this:


  const carousel = useTransitionCarousel({
    springAnimationProps: {
      initial: {
        transform: 'translateX(0%)',
        position: 'absolute',
      },
      from: {
        transform: 'translateX(100%)',
        position: 'absolute',
      },
      enter: {
        transform: 'translateX(0%)',
        position: 'absolute',
      },
      leave: {
        transform: 'translateX(-100%)',
        position: 'absolute',
      },
    },
  })

This could be just fine if you need a slideshow that goes only in one direction, but how to do it if you want to slide on both directions? Well, Reaect Spring Carousel is here to help you!


  import { useTransitionCarousel } from 'react-spring-carousel'

  export function Component() {
    const { 
      carouselFragment, 
      slideToPrevItem,
      slideToNextItem
    } = useTransitionCarousel({
      items: (
        <CarouselItem color={i.color}>
          {i.title}
        </CarouselItem>
      ),
      toPrevItemSpringProps: {
        initial: {
          transform: 'translateX(0%)',
          position: 'absolute',
        },
        from: {
          transform: 'translateX(-100%)',
          position: 'absolute',
        },
        enter: {
          transform: 'translateX(0%)',
          position: 'absolute',
        },
        leave: {
          transform: 'translateX(100%)',
          position: 'absolute',
        },
      },
      toNextItemSpringProps: {
        initial: {
          transform: 'translateX(0%)',
          position: 'absolute',
        },
        from: {
          transform: 'translateX(100%)',
          position: 'absolute',
        },
        enter: {
          transform: 'translateX(0%)',
          position: 'absolute',
        },
        leave: {
          transform: 'translateX(-100%)',
          position: 'absolute',
        },
      },
    });

    return (
      <button onClick={slideToPrevItem}>Prev item</button>
        {carouselFragment}
      <button onClick={slideToNextItem}>Next item</button>
    );
  }
prevLoopnextSwipe