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: one per view at Studio, two at Press, and at Press and up 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 Press (Max's call), so its pops and flexes are Press'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, 300 ms on
wipe, 40 ms apart - Press
- 360 ms, 48 ms apart
- Rave
- 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; one per view - Press
- Two per view, and the lettering flexes 28 width units and back
- Rave
- 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 one 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 to Rave
- 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 to Rave
- 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 (or the pile's comic hit prints one).
- Quiet
- Static
- Studio to Rave
- 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 once in a view at Studio.
Focus lines
The lines enter the view and close in on their centre.
- Quiet
- Static
- Studio to Rave
- 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 to Rave
- 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 to Rave
- 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.