RSCJS - React Spring Carousel JS

Use transition carousel

Example 1

Most of the examples and logic explained in the useSpringCarousel examples (API and options) can be also applied for useTransitionCarousel. The main difference lays in the engine used to animate our items. In this case, we're using the useTarnsition hook from react-spring. This means a slightly different result.

But why? While with useSpringCarousel you could use the carousel in the traditional way, there're some cases that it couldn't cover. For example, if you wanted to made a simple fade-in-out slideshow, you wouldn't be able to do it.

1import { useTransitionCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    thumbsFragment,
7    slideToPrevItem,
8    slideToNextItem,
9    slideToItem
10  } = useTransitionCarousel({
11    withThumbs: true,
12    withLoop: true,
13    items: [
14      {
15        id: "CarouselItem-1",
16        renderItem: (
17          <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>
18        ),
19        renderThumb: (
20          <ThumbItem
21            onClick={() => slideToItem("CarouselItem-1")}
22            primaryColor="#2c3e50"
23            background="#34495e"
24          >
25            Thumb item 1
26          </ThumbItem>
27        ),
28      },
29      // more items...
30    ],
31  });
32
33  return (
34    <div
35       css={css'
36         display: grid;
37         grid-gap: 1.6rem;
38        grid-template-rows: 1fr auto;
39       '}
40     >
41       <CarouselWrapper>
42        <ArrowButton type="prev" onClick={slideToPrevItem} />
43        {carouselFragment}
44        <ArrowButton type="next" onClick={slideToNextItem} />
45      </CarouselWrapper>
46      <ThumbsWrapper>{thumbsFragment}</ThumbsWrapper>
47     </div>
48  );
49}
50
Carousel Item 1
Thumb item 1
Thumb item 2
Thumb item 3
Thumb item 4
Thumb item 5
Thumb item 6
Thumb item 7
Thumb item 8
Thumb item 9
Thumb item 10

Example 2

You can also customize the behavior of your carousel during the initial, from,enter and leave phases by providing a springAnimationProps object. For more information about this phases, please refer to the official documentation.

1import { useTransitionCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    thumbsFragment,
7    slideToPrevItem,
8    slideToNextItem,
9    slideToItem,
10  } = useTransitionCarousel({
11    withThumbs: true,
12    withLoop: true,
13    springAnimationPops: {
14      initial: {
15        opacity: 1,
16      },
17      from: {
18        opacity: 0,
19        position: "absolute",
20        transform: "translateX(-100%)"
21      },
22      enter: {
23        opacity: 1,
24        transform: "translateX(0%)",
25        position: "relative",
26      },
27      leave: {
28        opacity: 0,
29        position: "absolute",
30        transform: "translateX(100%)" 
31      },
32    },
33    items: [
34      {
35        id: "CarouselItem-1",
36        renderItem: (
37          <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>
38        ),
39        renderThumb: (
40          <ThumbItem
41            onClick={() => slideToItem("CarouselItem-1")}
42            primaryColor="#2c3e50"
43            background="#34495e"
44          >
45            Thumb item 1
46          </ThumbItem>
47        ),
48      },
49      // more items...
50    ],
51  });
52
53  return (
54    <div
55      css={css'
56        display: grid;
57         grid-gap: 1.6rem;
58         grid-template-rows: 1fr auto;
59       '}
60     >
61      <CarouselWrapper>
62         <ArrowButton type="prev" onClick={slideToPrevItem} />
63         {carouselFragment}
64         <ArrowButton type="next" onClick={slideToNextItem} />
65       </CarouselWrapper>
66      <ThumbsWrapper>{thumbsFragment}</ThumbsWrapper>
67    </div>
68  );
69}
70
Carousel Item 1
Thumb item 1
Thumb item 2
Thumb item 3
Thumb item 4
Thumb item 5
Thumb item 6
Thumb item 7
Thumb item 8
Thumb item 9
Thumb item 10

Example 3

That was easy, but you have may noticed that the animation doesn't change if you slide to a previous or next item; this is because the configuration we provide is used as it is, regardless the fact that you may slide to a prev or next item.

To solve that you can provide a toPrevItemSpringProps and a toNextItemSpringProps or use just one of them. This way, you're defining which animation use when the carousel slide to a previous or to a next item. And it doesn't matter how you're triggering the slide, the carousel will always know which animation configuration use.

With both props:

1import { useTransitionCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    thumbsFragment,
7    slideToPrevItem,
8    slideToNextItem,
9    slideToItem,
10  } = useTransitionCarousel({
11    withThumbs: true,
12    withLoop: true,
13    toPrevItemSpringProps: {
14      initial: {
15        opacity: 1
16      },
17      from: {
18        transform: 'translateX(-100%)',
19        opacity: 0,
20        position: 'absolute'
21      },
22      enter: {
23        transform: 'translateX(0%)',
24        opacity: 1,
25        position: 'relative'
26      },
27      leave: {
28        transform: 'translateX(100%)',
29        opacity: 0,
30        position: 'absolute'
31      }
32    },
33    toNextItemSpringProps: {
34      initial: {
35        opacity: 1
36      },
37      from: {
38        transform: 'translateX(100%)',
39        opacity: 0,
40        position: 'absolute'
41      },
42      enter: {
43        transform: 'translateX(0%)',
44        opacity: 1,
45        position: 'relative'
46      },
47      leave: {
48        transform: 'translateX(-100%)',
49        opacity: 0,
50        position: 'absolute'
51      }
52    },
53    items: [
54      {
55        id: "CarouselItem-1",
56        renderItem: (
57          <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>
58        ),
59        renderThumb: (
60          <ThumbItem
61            onClick={() => slideToItem("CarouselItem-1")}
62            primaryColor="#2c3e50"
63            background="#34495e"
64          >
65            Thumb item 1
66          </ThumbItem>
67        ),
68      },
69      // more items ...
70    ],
71  });
72
73  return (
74    <div
75      css={css'
76         display: grid;
77         grid-gap: 1.6rem;
78         grid-template-rows: 1fr auto;
79      '}
80     >
81      <CarouselWrapper>
82        <ArrowButton type="prev" onClick={slideToPrevItem} />
83        {carouselFragment}
84        <ArrowButton type="next" onClick={slideToNextItem} />
85      </CarouselWrapper>
86      <ThumbsWrapper>{thumbsFragment}</ThumbsWrapper>
87    </div>
88  );
89}
90
Carousel Item 1
Thumb item 1
Thumb item 2
Thumb item 3
Thumb item 4
Thumb item 5
Thumb item 6
Thumb item 7
Thumb item 8
Thumb item 9
Thumb item 10
1import { useTransitionCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    thumbsFragment,
7    slideToPrevItem,
8    slideToNextItem,
9    slideToItem,
10  } = useTransitionCarousel({
11    withThumbs: true,
12    withLoop: true,
13    toNextItemSpringProps: {
14      initial: {
15        opacity: 1
16      },
17      from: {
18        transform: 'translateX(100%)',
19        opacity: 0,
20        position: 'absolute'
21      },
22      enter: {
23        transform: 'translateX(0%)',
24        opacity: 1,
25        position: 'relative'
26      },
27      leave: {
28        transform: 'translateX(-100%)',
29        opacity: 0,
30        position: 'absolute'
31      }
32    },
33    items: [
34      {
35        id: "CarouselItem-1",
36        renderItem: (
37          <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>
38        ),
39        renderThumb: (
40          <ThumbItem
41            onClick={() => slideToItem("CarouselItem-1")}
42            primaryColor="#2c3e50"
43            background="#34495e"
44          >
45            Thumb item 1
46          </ThumbItem>
47        ),
48      },
49      // more items ...
50    ],
51  });
52
53  return (
54    <div
55      css={css'
56         display: grid;
57         grid-gap: 1.6rem;
58         grid-template-rows: 1fr auto;
59      '}
60     >
61      <CarouselWrapper>
62        <ArrowButton type="prev" onClick={slideToPrevItem} />
63        {carouselFragment}
64        <ArrowButton type="next" onClick={slideToNextItem} />
65      </CarouselWrapper>
66      <ThumbsWrapper>{thumbsFragment}</ThumbsWrapper>
67    </div>
68  );
69}
70
Carousel Item 1
Thumb item 1
Thumb item 2
Thumb item 3
Thumb item 4
Thumb item 5
Thumb item 6
Thumb item 7
Thumb item 8
Thumb item 9
Thumb item 10

Example 4

With toNextItemSpringProps prop:

Almost perfect! But also here, you may notice that if you slide to aprevious item and then you slide to a next item again, there's a a small glitch (like if the previous item don't leave the scene in the correct way). This is because how the useTransition hook works. The moment you slide to a previous item, you're using the default animation configuration, which goes from opacity: 0, to opacity: 1 and so on; by sliding again to the next item, the current item should leave by animating to transform: translateX(-100%), but since the item was being animated only by using the opacity, the item is animating from nothing tothe leave value (so basically the item jumps without animating because there's no starting value to animate).

Example 5

The simple way to fix this behavior is by always providing the default value, even if you're not using it. Maybe you'll never use a configuration like this, but just in case:

1import { useTransitionCarousel } from 'react-spring-carousel-js'
2
3const Component = () => {
4  const {
5    carouselFragment,
6    thumbsFragment,
7    slideToPrevItem,
8    slideToNextItem,
9    slideToItem,
10  } = useTransitionCarousel({
11    withThumbs: true,
12    withLoop: true,
13    springAnimationProps: {
14      initial: {
15        opacity: 1,
16      },
17      from: {
18        transform: "translateX(0%)",
19        opacity: 0,
20        position: "absolute",
21      },
22      enter: {
23        transform: "translateX(0%)",
24        opacity: 1,
25        position: "relative",
26      },
27      leave: {
28        transform: "translateX(0%)",
29        opacity: 0,
30        position: "absolute",
31      },
32    },
33    toNextItemSpringProps: {
34      initial: {
35        opacity: 1
36      },
37      from: {
38        transform: 'translateX(100%)',
39        opacity: 0,
40        position: 'absolute'
41      },
42      enter: {
43        transform: 'translateX(0%)',
44        opacity: 1,
45        position: 'relative'
46      },
47      leave: {
48        transform: 'translateX(-100%)',
49        opacity: 0,
50        position: 'absolute'
51      }
52    },
53    items: [
54      {
55        id: "CarouselItem-1",
56        renderItem: (
57          <CarouselItem background="#2c3e50">Carousel Item 1</CarouselItem>
58        ),
59        renderThumb: (
60          <ThumbItem
61            onClick={() => slideToItem("CarouselItem-1")}
62            primaryColor="#2c3e50"
63            background="#34495e"
64          >
65            Thumb item 1
66          </ThumbItem>
67        ),
68      },
69      // more items ...
70    ],
71  });
72
73  return (
74    <div
75      css={css'
76         display: grid;
77         grid-gap: 1.6rem;
78         grid-template-rows: 1fr auto;
79      '}
80     >
81      <CarouselWrapper>
82        <ArrowButton type="prev" onClick={slideToPrevItem} />
83        {carouselFragment}
84        <ArrowButton type="next" onClick={slideToNextItem} />
85      </CarouselWrapper>
86      <ThumbsWrapper>{thumbsFragment}</ThumbsWrapper>
87    </div>
88  );
89}
90
Carousel Item 1
Thumb item 1
Thumb item 2
Thumb item 3
Thumb item 4
Thumb item 5
Thumb item 6
Thumb item 7
Thumb item 8
Thumb item 9
Thumb item 10
In case you don't provide the toPrevItemSpringProps or toNextItemSpringProps object props, the carousel will always use the springAnimationProps object, which you can also override by providing yours.