Framer Next

A technical showcase of the Framer API Examples implemented within a production React application environment. Each thumbnail links to a CodeSandbox environment with the Framer X API example hosted within Next.js.

Frame

The basic container for layout, styling, animation and events.

Frame API DocsOriginal CodeSandbox

Stack

Stacks help you easily create flexible and automatically distributed layouts with Frames.

Stack API DocsOriginal CodeSandbox

Animation

A set of properties and helpers for high-performance, declarative animations.

Animation API DocsOriginal CodeSandbox

Animate/Loop

Here, we’re setting the loop property to Infinity, and the ease to linear, for a perfectly looping animation.

Animate/Loop API DocsOriginal CodeSandbox

Animate/Cycle

You can cycle through animations with the useCycle method from Framer.

Animate/Cycle API DocsOriginal CodeSandbox

Animate/Color

Color strings can also be animated by using the background property.

Animate/Color API DocsOriginal CodeSandbox

Animate/Arrays

Next to single values, you can also animate arrays of values within the animate property.

Animate/Arrays API DocsOriginal CodeSandbox

Gestures

Start by animating a Frame when tapping on it. Then create two constants, a default rotate value of 0 and a setState method.

Gestures API DocsOriginal CodeSandbox

On Hover

Scale down a Frame when hovering it. Use the whileHover property, and pass along a property as its value.

On Hover API DocsOriginal CodeSandbox

Dragging/Constraints

You can easily make any Frame draggable with the drag property.

Dragging/Constraints API DocsOriginal CodeSandbox

Scrolling

For scrolling, you can wrap Frames in a Scroll component, to make them automatically scrollable.

Scrolling API DocsOriginal CodeSandbox

Paging

For paging, you can wrap Frames in a Page component to make them swipeable.

Paging API DocsOriginal CodeSandbox

Transforms

Here, we’re using two custom Hooks in Framer to transform values from one range to another.

Transforms API DocsOriginal CodeSandbox

Variants

Variants are collections of visual properties, like states, that you can animate or cycle between.

Variants API DocsOriginal CodeSandbox