---
title: "Curve"
description: "Curve carousel animation for React Native, with a live demo and its full source."
canonical_url: "https://rn-carousel.dev/Examples/custom-animations/curve"
markdown_url: "https://rn-carousel.dev/Examples/custom-animations/curve.md"
version: "5"
---
# Curve

Check out the `curve` animation demo for the full source code [here](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/app/demos/custom-animations/curve/index.tsx)

[Open the interactive curve demo](https://rn-carousel.dev/Examples/custom-animations/curve)

```tsx copy
import * as React from "react";
import { View } from "react-native";
import { Extrapolation, interpolate } from "react-native-reanimated";
import { Carousel } from "react-native-reanimated-carousel";

import { SBItem } from "@/components/SBItem";
import { window } from "@/constants/sizes";
import { withAnchorPoint } from "@/utils/anchor-point";

const PAGE_WIDTH = window.width / 5;
const colors = [
	"#26292E",
	"#899F9C",
	"#B3C680",
	"#5C6265",
	"#F5D399",
	"#F1F1F1",
];

function Index() {
	const containerHeight = window.width / 2;

	return (
		<View
			id="carousel-component"
			dataSet={{ kind: "custom-animations", name: "curve" }}
			style={{
				width: window.width,
				height: containerHeight,
				justifyContent: "center",
			}}
		>
			<Carousel
				loop
				snapMode="nearest"
				style={{
					width: window.width,
					height: PAGE_WIDTH * 0.6,
					justifyContent: "center",
					alignItems: "center",
					overflow: "visible",
				}}
				contentContainerStyle={{
					width: PAGE_WIDTH,
					overflow: "visible",
				}}
				autoplayInterval={150}
				animation={{ type: "timing", duration: 600 }}
				itemAnimation={(value: number) => {
					"worklet";
					const size = PAGE_WIDTH;
					const scale = interpolate(
						value,
						[-2, -1, 0, 1, 2],
						[1.7, 1.2, 1, 1.2, 1.7],
						Extrapolation.CLAMP,
					);

					const translate = interpolate(
						value,
						[-2, -1, 0, 1, 2],
						[-size * 1.45, -size * 0.9, 0, size * 0.9, size * 1.45],
					);

					const transform = {
						transform: [
							{ scale },
							{
								translateX: translate,
							},
							{ perspective: 150 },
							{
								rotateY: `${interpolate(value, [-1, 0, 1], [30, 0, -30], Extrapolation.CLAMP)}deg`,
							},
						],
					};

					return {
						...withAnchorPoint(
							transform,
							{ x: 0.5, y: 0.5 },
							{
								width: PAGE_WIDTH,
								height: PAGE_WIDTH * 0.6,
							},
						),
					};
				}}
				data={colors}
				renderItem={({ index }) => <SBItem index={index} />}
			/>
		</View>
	);
}

export default Index;

```