How to use @popmotion/easing - 10 common examples

<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.page, easeOut(props.progress))
				)}
				{progressable(
					
						React Overscroll relies on the viewport and therefore ensures responsive
						behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.page, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};

return (
		<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.pageIndex, easeOut(props.progress))
				)}
				{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.pageIndex, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};

const easeFast = (x: number) =>
    easeInOut(
      Number(interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))),
    );

{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
						
							<button href="{">
								Show me how
							</button>
						
					,
					switchProgress(3, props.pageIndex, easeInOut(props.progress))
				)}
			
		
	);
};

var easeFast = function (x) {
        return easing_1.easeInOut(Number(popcorn_1.interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))));
    };
    var spring = new wobble_1.Spring(__assign({ fromValue: Number(isInitial), toValue: Number(!isInitial) }, options.spring));

export const Devices = (props: any) => {
	return (
		<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.page, easeOut(props.progress))
				)}
				{progressable(
					
						React Overscroll relies on the viewport and therefore ensures responsive
						behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.page, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};

strokeDashoffset="calc(50.072696685791016 + var(--progress) * 50.072696685791016)"
				/>

export const Devices = (props: any) => {
	return (
		<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.pageIndex, easeOut(props.progress))
				)}
				{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
						
							<button href="{">
								Show me how
							</button>
						
					,</figcaption></figure>

cy="16.99"
					r="2.99"
					fill={`hsla(0, 0%, 15%, calc(var(--progress-2) * 1))`}
					strokeDasharray="18.307579040527344 18.307579040527344"
					strokeDashoffset={
						18.307579040527344 +
						switchProgress(2, props.pageIndex, easeIn(props.progress)) *
							18.307579040527344
					}
				/>

export const Devices = (props: any) => {
	return (
		<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.pageIndex, easeOut(props.progress))
				)}
				{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.pageIndex, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};