Plainware Motion Pro
/9 native effect recipes
Native effects
Framer’s own Effects panel with the exact values we use in our templates. Select a layer, add the effect, type the numbers, no code. Every example below runs the recipe written under it.
Ease values are Bezier curves (x1, y1, x2, y2). Spring values are Framer’s Time + Bounce spring. Stagger is the delay between words or characters. Threshold is how much of the layer must be visible before it starts.
/Recipe 01
Blur-in heading, by word
Section headings (h2).
Text effect
In View · Threshold 50% · Replay off
Word
Opacity 0 · Blur 15 px · Rotate Y 45°
Spring · Time 0.8 s · Bounce 0
0.05 s · Delay 0
/Recipe 02
Blur-in hero title, by character
The page H1. On your site use On Load; this example uses In View so you can watch it (the title of this page runs the On Load version).
Text effect
On Load
Character
Opacity 0 · Blur 15 px · Rotate Y 90°
Spring · Time 0.4 s · Bounce 0
0.05 s · Delay 0
Paragraphs settle in word by word, a little slower than headings, so the eye can follow the sentence as it lands.
/Recipe 03
Paragraph, by word
Section intro paragraphs: one or two per page, not card copy.
Text effect
In View · Threshold 50% · Replay off
Word
Opacity 0 · Blur 15 px · Rotate Y 30°
Spring · Time 1 s · Bounce 0
0.05 s · Delay 0
Reveal-up
/Recipe 04
Reveal-up block
Eyebrows, stats, buttons, FAQ rows, forms: anything that is not a heading.
Appear
In View · Threshold 50% · Replay off
Opacity 0 · Offset Y 40
Ease 0.12, 0.23, 0.17, 0.99 · 1 s
0 s
Primary
Secondary
/Recipe 05
Hero block on load
Everything in the hero next to the title: intro, buttons, badges. The intro on this page runs it.
Appear
On Load (this example: In View)
Opacity 0 · Offset Y 24
Ease 0.12, 0.23, 0.17, 0.99 · 1.5 s
0.4 s
01
02
03
/Recipe 06
Staggered cards
Card grids and lists. Put the effect on each card; the parent Stagger setting moves the whole group instead.
Appear, on every card
In View · Threshold 0 · Replay off
Opacity 0 · Offset Y 40
Ease 0.12, 0.23, 0.17, 0.99 · 1 s
Card 1: 0 s · Card 2: 0.1 s · Card 3: 0.2 s
Brand
Work · About · Contact
/Recipe 07
Nav from top
The navigation bar in your layout template. The nav of this site runs it (On Load).
Appear
On Load (this example: In View)
Opacity 0 · Offset Y −100
Spring · Time 1 s · Bounce 0
0.4 s
/Recipe 08
Image rise
Large images outside the hero. Skip it on full-bleed backgrounds inside a clipped band.
Appear
In View · Threshold 0 · Replay off
Opacity 0.5 · Offset Y 100
Spring · Time 1 s · Bounce 0
0.1 s
/Recipe 09
Link color fade
Inline and footer links. Set it once on the link style and every link using it fades.
Link style → Transition
Paper → Lime on hover
Ease 0.12, 0.23, 0.17, 0.99 · 0.5 s
Switches instantly