Documentation

Documentation

JavaScript

wrap

wrap

wrap will take a value and wrap it within a limited range.

wrap(0, 100, 150) // 50

This is useful, for instance when creating next/prev pagination.

const index = wrap(0, numItems, currentIndex + 1)

Usage

Import from Motion:

import { wrap } from "motion"

wrap accepts a min and max, and a value to wrap through that range.

Values within this range will be unaffected:

wrap(0, 10, 5) // 5

When the provided value is outside the range, it'll be wrapped back around:

wrap(0, 10, 11) // 1
wrap(0, 10, -1) // 9

A Motion+ membership will give you early access to features & content, access to our private Github and Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!

MOTION+

Premium React components

Motion+ is a one-time fee, lifetime membership that supports Motion and grants access to the source code of an ever-growing library of examples.


You also gain access to Cursor and AnimateNumber, two exclusive new React components. Check out what they can do: