Visible parts in parallax mode

[lukisrac]

Hello, is it possible to make it look like on the picture below, using parallax mode?

If the slide is first or somewhere in middle, the small side of next item should be visible.
If the slide is last, the small side of previous item should be visible.

[dosubot]

Hi @lukisrac! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

Yes, you can achieve this effect in parallax mode by adjusting the modeConfig props on the Carousel component. Specifically, use parallaxScrollingOffset to control how much of the next/previous slide is visible, and parallaxScrollingScale to tweak the scale of the slides. For example:

<Carousel
  mode="parallax"
  modeConfig={{
    parallaxScrollingScale: 0.9,
    parallaxScrollingOffset: 50,
  }}
  // ...other props
/>

Increasing parallaxScrollingOffset will show more of the adjacent slides, while parallaxScrollingScale adjusts their size. There are no dedicated padding or margin props for this, but these parameters let you fine-tune the look you want. You can see this approach in the parallax mode demo and the parallax layout config.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[lukisrac]

Hi @lukisrac! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

Yes, you can achieve this effect in parallax mode by adjusting the modeConfig props on the Carousel component. Specifically, use parallaxScrollingOffset to control how much of the next/previous slide is visible, and parallaxScrollingScale to tweak the scale of the slides. For example:

<Carousel
mode="parallax"
modeConfig={{
parallaxScrollingScale: 0.9,
parallaxScrollingOffset: 50,
}}
// ...other props
/>
Increasing parallaxScrollingOffset will show more of the adjacent slides, while parallaxScrollingScale adjusts their size. There are no dedicated padding or margin props for this, but these parameters let you fine-tune the look you want. You can see this approach in the parallax mode demo and the parallax layout config.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other   

@dosu That doesn!t help me if I want this just for first and middle item, and for the last item I want the opposite side

[dosubot]

You're right—the built-in parallax modeConfig props apply the same effect to all slides, so you can't get asymmetric side visibility (e.g., only next item visible for first/middle, only previous for last) with just those settings.

However, you can achieve this with the customAnimation prop, which lets you define per-slide logic using both the animated value and the item index. You'd adapt the parallax transform logic (see src/layouts/parallax.ts) and add index checks to control which side is visible.

Here's a high-level example (pseudocode):

<Carousel
  // ...other props
  customAnimation={(value, index) => {
    'worklet';
    // Assume you know total number of slides: totalSlides
    // For first/middle: show next item (default parallax)
    // For last: show previous item only
    if (index === totalSlides - 1) {
      // Only show previous item (hide next)
      const translate = interpolate(
        value,
        [-1, 0, 1],
        [-size + offset, 0, 0] // No translation for next
      );
      // ...rest of transform logic
      return { transform: [{ translateX: translate }, { scale: ... }] };
    } else {
      // Default parallax: show next item
      const translate = interpolate(
        value,
        [-1, 0, 1],
        [-size + offset, 0, size - offset]
      );
      return { transform: [{ translateX: translate }, { scale: ... }] };
    }
  }}
/>

You can copy the transform and scale logic from the parallax layout source and tweak the interpolation ranges as needed for each index. Let me know if you want a more concrete code sample or help adapting this to your setup!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[lukisrac]

You're right—the built-in parallax modeConfig props apply the same effect to all slides, so you can't get asymmetric side visibility (e.g., only next item visible for first/middle, only previous for last) with just those settings.

However, you can achieve this with the customAnimation prop, which lets you define per-slide logic using both the animated value and the item index. You'd adapt the parallax transform logic (see src/layouts/parallax.ts) and add index checks to control which side is visible.

Here's a high-level example (pseudocode):

<Carousel
// ...other props
customAnimation={(value, index) => {
'worklet';
// Assume you know total number of slides: totalSlides
// For first/middle: show next item (default parallax)
// For last: show previous item only
if (index === totalSlides - 1) {
// Only show previous item (hide next)
const translate = interpolate(
value,
[-1, 0, 1],
[-size + offset, 0, 0] // No translation for next
);
// ...rest of transform logic
return { transform: [{ translateX: translate }, { scale: ... }] };
} else {
// Default parallax: show next item
const translate = interpolate(
value,
[-1, 0, 1],
[-size + offset, 0, size - offset]
);
return { transform: [{ translateX: translate }, { scale: ... }] };
}
}}
/>
You can copy the transform and scale logic from the parallax layout source and tweak the interpolation ranges as needed for each index. Let me know if you want a more concrete code sample or help adapting this to your setup!

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other   

@dosu Yes, give me some example please

[dosubot]

Here's a concrete example for asymmetric parallax using the customAnimation prop. This will show only the next item for all slides except the last, where only the previous item is visible. You can adapt the variables as needed for your layout.

import { interpolate, Extrapolation } from 'react-native-reanimated';

// Example values—replace with your actual slide size and offset
const size = 300; // width for horizontal, height for vertical
const parallaxScrollingOffset = 50;
const parallaxScrollingScale = 0.9;
const parallaxAdjacentItemScale = parallaxScrollingScale ** 2;

const totalSlides = data.length; // data is your carousel data array

<Carousel
  // ...other props
  customAnimation={(value, index) => {
    'worklet';
    // For the last slide: only show previous item (hide next)
    let translate;
    if (index === totalSlides - 1) {
      translate = interpolate(
        value,
        [-1, 0, 1],
        [-size + parallaxScrollingOffset, 0, 0], // No translation for next
        Extrapolation.CLAMP
      );
    } else {
      // Default parallax: show next item
      translate = interpolate(
        value,
        [-1, 0, 1],
        [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset],
        Extrapolation.CLAMP
      );
    }

    const scale = interpolate(
      value,
      [-1, 0, 1],
      [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale],
      Extrapolation.CLAMP
    );

    return {
      transform: [
        { translateX: translate }, // Use translateY for vertical carousels
        { scale },
      ],
      zIndex: Math.round(interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolation.CLAMP)),
    };
  }}
/>

Make sure size, parallaxScrollingOffset, and the other variables match your carousel's configuration. For vertical carousels, swap translateX for translateY. The key is the index check, which changes the interpolation for the last slide so only the previous item is visible. This logic is adapted directly from the parallax layout source.

If you have a dynamic data array, be sure to update totalSlides accordingly. Let me know if you need help tweaking this for your setup!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}