Comic motion reads like the page it is on: panels open in reading order, a balloon pops from its tail, a hit word lands where the hit happened, and lines and stars land with it. The words in balloons and captions arrive with their plate and then hold still like every other word.
One hit per view#
An SFX is a punchline, so it is rationed: two per view at Studio, four at Max, and the lettering flexes once on the width axis after it lands. An SFX with a cause sounds its voice when it lands, if sound is on. SFX words are art: assistive tech skips them unless they carry a message, which then also exists as text. The comic page template runs at Studio, so its pops and flexes are Studio's.
Comic panels
The panel grid enters the view: the panels wipe in, in reading order.
- Quiet
- None
- Studio
- Each panel wipes open from its leading edge, 360 ms on
wipe, 48 ms apart - Max
- 420 ms, 55 ms apart
- Reduced motion
- None: the page is there.
- Sound
- None
- Tokens
--mk-dur-panel--mk-dur-panel-stagger--mk-ease-wipe- Keyframes
mk-wipe- Who plays it
- Panel · @maxgrits/overprint-react/comic · Panel and panel grid
Use it A comic page or strip arriving.
Not when Wiping single cards of a normal page (they arrive as panels instead).
SFX pop
The SFX enters the view, or something caused it (cause).
- Quiet
- Hidden
- Studio
- Pops from 0.2 at −14°, overshoots and settles, 700 ms on
out; two per view, and the lettering flexes 28 width units and back - Max
- Per the comic kit, with the flex
- Reduced motion
- Static.
- Sound
- With a
cause, the cause's voice (impact plays pow, arrive plays pop) as it lands - Tokens
--mk-dur-sfx-pop--mk-dur-sfx-hold--mk-dur-sfx-out--mk-ease-out--mk-ease-pop- Keyframes
mk-popmk-flex- Who plays it
- SFX · @maxgrits/overprint-react/comic · Sound effects (SFX)
Use it One hit word where something happened: a launch, a sale, a big number.
Not when More than two per view at Studio, behind words, or as the only place a message lives.
KeyPop
The first press of a hit key in a page view.
- Quiet
- Never
- Studio and Max
- A word pops off the key, holds 600 ms and prints out, once
- Reduced motion
- None.
- Sound
- pop
- Tokens
--mk-dur-sfx-pop--mk-dur-sfx-hold--mk-dur-sfx-out--mk-ease-out- Keyframes
mk-popmk-print-out
Use it The one action key of a page (Get a quote).
Not when On every key, or more than once a page view.
Balloon pop
The balloon enters the view.
Built to be tested.
- Quiet
- Appears
- Studio and Max
- Pops in from its tail, 260 ms on
pop - Reduced motion
- Appears.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-pop- Keyframes
mk-balloon-in- Who plays it
- Balloon · @maxgrits/overprint-react/comic · Balloon
Use it A line of dialogue landing in its panel.
Not when Balloons over 35 words, or popping on every hover.
Impact star
The star enters the view.
- Quiet
- Static
- Studio and Max
- Flashes in from small, 260 ms on
pop - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-pop- Keyframes
mk-flash- Who plays it
- ImpactStar · @maxgrits/overprint-react/comic · Impact star
Use it Behind an SFX word, at the point of impact.
Not when Behind running text, or more than twice in a view at Studio.
Focus lines
The lines enter the view and close in on their centre.
- Quiet
- Static
- Studio and Max
- Close in from the edges, 360 ms on
out - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-focus-in- Who plays it
- FocusLines · @maxgrits/overprint-react/comic · Focus lines
Use it Pointing a panel at one thing.
Not when Under words: the lines keep their clear centre around the subject.
Speed lines
The lines enter the view behind something moving.
- Quiet
- Static
- Studio and Max
- Streak in along their direction, 300 ms on
out - Reduced motion
- Static.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-out- Keyframes
mk-streak- Who plays it
- SpeedLines · @maxgrits/overprint-react/comic · Speed lines
Use it Behind an object that is moving in the story.
Not when Behind text, or looping.
Splash title
The splash title enters the view.
Websites that win
- Quiet
- Printed on its own paper plate
- Studio and Max
- The splash art drops 24 px into place and fades in, 520 ms on
title - Reduced motion
- Printed at once.
- Sound
- None
- Tokens
--mk-dur-reduced--mk-ease-title- Keyframes
mk-splash-drop- Who plays it
- SplashTitle · @maxgrits/overprint-react/comic · Splash title
Use it The one splash of a comic page.
Not when More than one splash per view.