Plainware Motion Pro

/7 code overrides

Overrides

Overrides add motion to layers you already have. Select a layer → Code Overrides → PlainwareMotionOverrides → pick an export. The layer keeps its text, styles and links, so it stays editable.

withScramble

withRollButton

withRollNav

withCountUp

withArrowSwap

withSlideSwap

withBlurIn

02 / 07

/Override · 01

withScramble

Letters resolve left to right out of random glyphs the first time the layer scrolls into view. Our templates use it on section labels and eyebrows.

Attach to

A Text layer: short labels, 1–4 words

Trigger

First pixel in view, runs once

Timing

52 ms per letter, 10 random glyphs ahead

/Gotchas

· The letters stay hidden until the layer scrolls in, so keep it off body copy.

· One text style per layer: mixed bold or colored runs are scrambled as plain text.

· Don’t stack it with a native text effect on the same layer.

Live · scroll this card into view

/Selected work

Est. 2014 · Berlin

04 / Case studies

/Override · 02

withRollButton

On hover every letter of a button label rolls up to a copy of itself in a soft wave. The label stays a normal, editable text layer.

Attach to

The Text layer inside a button

Hover area

The surrounding link or button frame

Timing

Spring 0.4 s, no bounce, 80 % stagger

/Gotchas

· Attach it to the label text, not to the button frame.

· Give the button frame a link (or a pointer cursor) so hovering anywhere on it rolls the label.

· Single-line labels only.

Live · hover the buttons

Start a project

View pricing

/Override · 03

withRollNav

The same roll with a tighter wave, tuned for navigation links. Text that isn’t a link is skipped, so it is safe on a whole nav.

Attach to

A Text layer that is a link

Hover area

The link itself

Timing

Spring 0.4 s, no bounce, 35 % stagger

/Gotchas

· Inline links need the text layer: set the link on the text and attach the override there.

· The navigation on this site uses it. Hover the links at the top.

· Works inside navigation components and their variants.

Live · hover the links

/Override · 04

withCountUp

Counts from zero to the figure when the layer scrolls into view, then puts your exact text back. Prefix, suffix, decimals and commas survive.

Attach to

A Text layer with a figure: 1,400+ · $2.5M · 4.9

Trigger

First pixel in view, runs once

Timing

2 s, cubic-bezier(0, 0, 0.58, 1)

/Gotchas

· Type the figure exactly as it should end: the text you type is the final state.

· The first number in the text is the one that counts; 0 is left alone.

· Figures visible at page load start counting right away.

Live · scroll this card into view

1,400+

Sites launched

$2.5M

Client revenue

4.9

Average rating

/Override · 05

withArrowSwap

On hover the arrow slides out to the right while a fresh copy slides in from the left, clipped to the icon’s own box so nothing around it moves.

Attach to

An Icon layer, e.g. Phosphor Arrow Right

Hover area

The surrounding link or button frame

Timing

Spring 0.6 s, no bounce

/Gotchas

· Attach it to the Icon layer itself. Framer renders icons as an SVG.

· Pair it with withRollButton on the label for the full button.

· Use horizontal arrows; the copy always enters from the left.

Live · hover the buttons

Get in touch

/Override · 06

withSlideSwap

On hover the link text slides out to the right while a copy slides in from the left. Built for footer and menu links.

Attach to

A single-line Text layer that is a link

Hover area

The link or the text

Timing

0.6 s, cubic-bezier(0.16, 1, 0.3, 1)

/Gotchas

· Text Align must be Left and the link must fit on one line. Centered or wrapping links are skipped.

· Inline links need the text layer: attach to the text that carries the link.

· The footer of this site uses it.

Live · hover the links

/Override · 07

withBlurIn

The whole layer un-blurs from 15 px to sharp when it scrolls into view. Made for Text Fit headings, where native text effects can’t run.

Attach to

Text Fit headings, or any layer

Trigger

First pixel in view, runs once

Timing

Blur 15 px → 0 in 1.5 s, 0.2 s delay

/Gotchas

· Text Fit headings use withBlurIn. Framer draws them as an SVG, so a per-word text effect is skipped.

· Normal headings look better with the native blur-in recipe on the Native effects page.

· Works on images and whole cards too.

Live · Text Fit heading

Font size: Text Fit · Override: withBlurIn