gifs/webp
anna yeaman
Basics of animation
in email
Jasper Conran, Frama, Mendo, Abercrombie, LK Bennett, American Trench, Monocle, Everyday Needs
1
2
3
4
5
6
7
8
03
From my ‘Cut’ folder of reference material
1
2
3
4
5
6
7
8
04
01
02
03
04
05
file-size
placement
accessibility
making
trends
Animation in email
Video
05
Parachute fonts
John Hardy
Coach
Nike
Uber eats
Adidas
No man walks alone
Costco
Moncler Genius
Red Wing Shoes
Savage X Fenty
Hollister
Mendo
J. Crew
F. Miller
Atmos
Abercrombie & Fitch
Levi's
Eddie Bauer
Harbor Freight Tools
Rago
Marks & Spencer
Gymshark
Surface magazine
Jackson's
Popeye magazine
The Boston Globe
Perimeter Books
Amag Publisher
Mousse magazine
End clothing
Papa Murphy’s
Runway
Netflix
Klim Type Foundry
Everpress
Avant arte
Eton Shirts
Lars Müller Publishers
Monocle
Charlotte Tilbury
Saks Fifth Avenue
American Trench
Ted Baker
Everyday Needs
Picturestart
Slanted
All Saints
Materia
Resident NZ
Hermes
Jean Paul Gaultier
Wildfang
Yelp
Patagonia
Next
Sportivo
Urban Outfitters
BBC iPlayer
Feng Chen Wang
Hole & Corner
Camilla and Marc
Kiehl's
WYSE London
Mulberry
Wright
Google One
Acne Studios
Han Kjøbenhavn
Duke + Dexter
LK Bennett
Fortnum & Mason
Rhizome News
Frost Collective
MagCulture
Frama
Yohji Yamaoto
Colors x Studios
Kaiber
OffCourt
The North Face
Cole Haan
Booking.com
Marshalls
Office
N21
Typographics
SPBH Editions
Fig.1
Allen Edmunds
Pentagram
Toomey & Co.
Jasper Conran
Naked Copenhagen
Ambush
A24
Lama
Vanmoof
H&M
Zara
06
100 animations
Inbox haul
All Saints, Eton Shirts
54 cuts, 26 video and 20 keyframe animations
Video 26/100
Cuts 54/100
100 animations
07
Han Kjøbenhavn, All Saints, Mulberry, Allen Edmunds, Jean Paul Gaultier, Hermès, Feng Chen Wang, Materia.
1
2
3
4
5
6
7
8
08
Frames
Booking.com
Yelp 451kb
Stop motion
Han Kjøbenhavn
Weight
Slack 3mb
Resolution
Half res
Stack 1mb
Multiple
Compass
ezgif
WebP
Zara
AVIF
10x smaller
Chanel
Gmail
File size
10
2 fr
2 fr
2 fr
2 fr
2 fr
2 fr
2 fr
2 fr
2 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
3 fr
4 fr
4 fr
25 fr
25 fr
26 fr
30 fr
30 fr
33 fr
35 fr
40 fr
42 fr
44 fr
44 fr
46 fr
47 fr
50 fr
50 fr
52 fr
57 fr
60 fr
60 fr
60 fr
62 fr
70 fr
77 fr
86 fr
91 fr
100 fr
120 fr
130 fr
136 fr
150 fr
173 fr
178 fr
479 fr
480 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
4 fr
5 fr
5 fr
5 fr
6 fr
6 fr
6 fr
6 fr
6 fr
7 fr
7 fr
7 fr
Frames
15 – 50 frames
7 fr
8 fr
8 fr
8 fr
8 fr
9 fr
11 fr
12 fr
12 fr
13 fr
14 fr
14 fr
15 fr
15 fr
16 fr
16 fr
20 fr
21 fr
22 fr
23 fr
23 fr
24 fr
Frames
This animation uses just eight frames to create a ‘video-like’ experience, and has a stop-motion feel due to the low frame rate. Comes in just under the 1MB Gif limit often referenced.
Booking.com
Frames
451kb, the smallest video file of the group, twelve frames and 1x res.
Yelp
Reduced frame-rate
104 frames to 12. Created in After Effects, then rebuilt in PS timeline. Can skip the AE part but I find it easier.
12 frames
Frames
Typically we want something that runs more smoothly, like this video from retailer Han Kjøbenhavn.
Han Kjøbenhavn
15
Fr 1
0.1 sec
Fr 2
0.1 sec
Fr 3
0.1 sec
Fr 4
0.1 sec
Fr 5
0.1 sec
Fr 6
0.1 sec
Fr 7
0.1 sec
Fr 8
0.1 sec
Fr 9
0.1 sec
Fr 10
0.1 sec
Fr 11
0.1 sec
Fr 12
0.1 sec
Fr 13
0.1 sec
Fr 14
0.1 sec
Fr 15
0.1 sec
Fr 16
0.1 sec
Fr 17
0.1 sec
Fr 18
0.1 sec
Fr 19
0.1 sec
Fr 20
0.1 sec
Fr 22
0.1 sec
Fr 23
0.1 sec
Fr 24
0.1 sec
Fr 25
0.1 sec
Fr 21
0.1 sec
25 frames
Han Kjøbenhavn
25.4 kb
26.6 kb
43.5 kb
65 kb
69 kb
75.6 kb
132 kb
138 kb
145 kb
170 kb
181 kb
192 kb
206 kb
219 kb
233 kb
262 kb
277 kb
286 kb
299 kb
308 kb
309 kb
340 kb
349 kb
356 kb
377 kb
451 kb
482 kb
506 kb
520 kb
624 kb
683 kb
715 kb
782 kb
786 kb
802 kb
821 kb
836 kb
864 kb
874 kb
876 kb
944 kb
970 kb
986 kb
1.08 mb
1.18 mb
1.24 mb
1.25 mb
1.44 mb
1.46 mb
1.57 mb
1.60 mb
1.60 mb
1.87 mb
1.99 mb
2.00 mb
2.32 mb
2.40 mb
2.59 mb
2.65 mb
2.83 mb
2.86 mb
2.87 mb
2.89 mb
2.96 mb
3.03 mb
3.15 mb
3.23 mb
3.23 mb
3.25 mb
3.35 mb
3.50 mb
3.54 mb
3.56 mb
3.72 mb
3.77 mb
3.84 mb
3.92 mb
4.00 mb
4.11 mb
4.15 mb
4.23 mb
4.33 mb
4.38 mb
4.40 mb
4.41 mb
4.41 mb
4.47 mb
4.97 mb
5.04 mb
5.19 mb
5.31 mb
5.62 mb
6.01 mb
6.05 mb
7.36 mb
7.41 mb
8.16 mb
8.84 mb
12.2 mb
15.6 mb
16
File-size
Video weight 3 – 5 MB
17
Recommended file specs are MP4, GIF, or WebM, preferably under 3 MB and with no audio unless necessary.
Web animations
Slack motion guidelines
0.5x
0.5x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
>1x
>1x
>1x
>1x
>1x
>1x
>1x
>1x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
2x
18
Only 7/26 videos 2x res
File-size
Resolution
gifs/webp
Half resolution
Mulberry 285x356 px video scaled up to 600px, looks like a filter has given their video a degraded retro quality.
20
Include vital information in the first frame, keep under ~1MB, can go over with a good-looking Gif provided the rest of the email is relatively small.
File-size
Stack Overflow Guidelines
Multiple
Paco Rabanne included 3 – 5 videos in a number of sends this year.
Paco Rabanne
22
Email Gif - 1200 ✕ 600(or shorter), limit the use of color, motion, and timing/length. Final output should be no more than 1MB in size. Unless otherwise specified, Gif animations should loop.
File-size
Compass
23
Ezgif.com-optimize.gif
1393320_ezgif.webp
Optimizers
ezgif
001.gif
002.gif
003.gif
004.webp
005.gif
006.gif
007.gif
008.gif
009.gif
010.gif
011.gif
012.gif
013.gif
014.gif
015.gif
016.gif
017.gif
018.gif
019.gif
020.gif
021.gif
022.gif
023.gif
024.gif
025.gif
026.gif
027.gif
028.gif
029.gif
030.gif
031.gif
032.gif
033.gif
034.gif
035.gif
036.gif
037.webp
038.gif
039.gif
040.gif
041.gif
042.gif
043.gif
044.webp
045.gif
046.gif
047.gif
048.gif
049.gif
050.gif
051.gif
052.gif
053.gif
054.webp
055.gif
056.gif
057.gif
058.gif
059.gif
060.gif
061.gif
062.gif
063.gif
064.gif
065.gif
066.gif
067.gif
068.gif
069.gif
070.gif
071.gif
072.gif
073.gif
074.gif
075.gif
076.gif
077.gif
078.gif
079.gif
080.gif
081.gif
082.gif
083.gif
084.gif
085.gif
086.gif
087.gif
088.gif
089.gif
090.gif
091.gif
092.gif
093.gif
094.gif
095.gif
096.gif
097.gif
098.gif
099.gif
100.webp
24
Format
WebP
gifs/webp
WebP
Ted Baker
WebP
Animated Gifs converted to WebP 64% smaller; 30% smaller than Jpeg without loss of quality.
Format
WebP 924 x 1152 px, 82 fr and 3.74 MB
Gif 400 x 498px, 52 fr and 6.6 MB
Zimmermann
gifs/webp
Paco Rabanne
Zara
640x1216px
WebP video
WebP
Gmail partial support, displays first frame of an animated WebP, like desktop Outlook and Gifs.
Caniemail
30
Webp is designed to supersede jpeg, png and gif, and avif and
jpeg xl are designed to supersede webp.
AVIF
caniuse
AVIF
Up to ten times smaller than jpeg, high compression rates without sacrificing quality. Well suited for live photos.
Apple
Stylecampaign
32
AVIF
Photoshop plugin
AVIF
56% email support, and it goes up to 65% with partial support where it gets converted to a Jpg or Gif.
Caniemail
34
File-size
102 kb code only Gmail
Secondary
10 of 26
COS
Draw eye
Maison Margiela
LCP
No animation
First screen
No header
Flipped logo
Balestra
Lazy loading
Placement
Placement
Hero loads fast (LCP), secondary video draws you down the email, and brings attention to products around it.
COS
Placement
Small, slow-mo videos interspersed, drawing you down the web page. Small teasers keeping you engaged.
Maison Margiela
Largest contentful paint (LCP)
Conversion rate peaks just over 6% for (LCP) of 1.1 sec. As LCP slows, conversion rate 3% at 2 sec.
SpeedCurve
Animation and LCP
Sites should strive to have (LCP) of 2.5 seconds or less (Google). Can’t afford to spend LCP budget on animation.
Cloudfour
40
Scrolling starts immediately — even before all the screen’s elements can fully load. People are accustomed to the cloying, top-crowding design choices, they often scroll right past the first “screenful” and settle below.
Placement
10/26 secondary
No header
Straight to content with a banner logo in the footer. I’ve seen a number of ‘no header’ websites and a few emails.
Neighbour
New Menswear Arrivals
From: Neighbour
Flipped, no header
Seen on fashion, publishing, architecture, and design studios websites. Bit brustlist, ‘undesigned’.
Balestra
43
loading="lazy"on <img> element used to defer loading images that are off-screen until user scrolls near them.
Accessibility
Mozilla
Native lazy loading
Browser only loads images when near, useful for Gifs further down the page. Avoid lazy loading hero images.
Caniemail
Player controls
Pause, stop, hide
Risd marquee
Digital sustainability
HTML5 video
BBC guidelines
Lazy loading
Reduced motion
Three flashes
Motion sickness
Val Head
Image-based type
Paco Rabanne
Live text
Noom guidelines
Uber guidelines
Motion grid
Unity guidelines
Accessibility
46
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it.
WCAG
Player controls
47
Controls
Marquee
48
Recently we went to trivia night and one of the questions was “what has a bigger carbon footprint: sending 100 emails or driving 1 km in a car?”
We answered “Driving 1 km in a car,” because duh.
Well we were wrong.
File-size
MEK CO2 emissions
gifs/webp
HTML5 video controls
Moncler
50
Gifs don't support play or pause, if the animation is near the bottom of a page, the 5 sec loop duration is likely to be finished before the user ever sees it.
File-size
BBC Gel guidelines
Reduced motion
Brad Frost
Prefers reduced motion
caniemail
53
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
WCAG 2.2
Blinking and flashing
Motion sensitivity
Val Head
gifs/webp
Paco Rabanne
Paco Rabanne
Image-based type
Live text
Joseph email
Type and logos
Uber motion guidelines
Type and logos
Noom motion guidelines
Motion grid
Unity
60
Our motion guidelines set a consistent visual language for animation across the Unity brand, for use in promotional videos, tutorials, product showcases, and social media posts.
Guidelines
Unity
PS gifs
WebpShop
layerRenamer
FFmpeg
GifGun
Motion tools
Compass
WebP lib
CSS
Motion specs
Easing
Vevo
Hulu
Transitions
Guidelines
Making
Stylecampaign
62
Animated Gif
PS, file, export, save for web (legacy), dialog box, click save.
Layer 1, layer 2 and so on
Window/timeline, create frame animation
Save for web
dialog box
Stylecampaign
63
Animated WebP
PS, file, save a copy, WebPShop, save, dialog box appears, OK.
No timeline
Frame 1 (1000 ms), Frame 2 (1000 ms) and so on
WebPShop
dialog box
Stylecampaign
64
Photoshop
Script
frame %n (100 ms)
65
After Effects > Composition > Add to render queue > MP4 > Render > FFmpeg > Mp4 > animated Gif or WebP.
AE to FFmpeg
Gif/WebP
MP4 to Gif
FFmpeg
67
Photoshop > File > Export > Render video > MP4 > FFmpeg > animated Gif or WebP.
PS to FFmpeg
WebP
68
AE > Select composition > Gif button (GifGun) > animated.gif.
AE to Gif
GifGun
69
AE > Select composition > Gif button (Motion tools) > animated.gif.
AE to Gif
Motion tools
70
AE > Composition > Add to render queue > Output module > Format > PNG sequence > Render.
AE to PNG sequence
Compass
Stylecampaign
developers.google.com/speed/webp/docs/using
71
WebP lib
Webp video
Motion Tools Gif output for AE
Photoshop layerRenamer script for WebP
72
Making
Tools
Motion specs
Inspector Spacetime
If possible and you have the skills and time, do it in code. AE is handy for prototyping, and working out your ideas first. For specs see Inspector Spacetime.
74
AE prior to dev
Motion specs
Making
Easing tokens
After Effects plugins
Easing
Stylecampaign
Motion graphics
Hulu
77
77
Stylecampaign
78
Making
Fresh Island Festival
Stylecampaign
79
Making
Slack motion guidelines
80
Making
Guidelines
Otto
Pinterest by DIA
Generative tools
Tokyo Dome
Video editors
Lo-fi
TikTok
Video grids
Stocky’s
Ozone
Adobe
Danny Glover
AI editors
Apple obj. capture
Spatial commerce
3D models
Tooling trends
82
Realizing our need for motion and the fact that not everybody knows how to use After Effects, we asked ourselves, “What if we built our own motion tool?”.
Square
otto
Square
We challenged ourselves to create a web-based motion generative tool so anyone with an internet connection can make on-brand motion content in an instant. Otto was born.
otto
Modular / generative toolkit
Pinterest by DIA
85
How to create a motion system for teams with little to no motion experience to be able to create commercial ready content. 😅 It's essentially a generative edit tool housed within AE.
Mitch Paone
DIA
Generative tooling
Tokyo Dome City
Generative tooling
DIA
TikTok
Video editors
Short-form, mobile-first, lo-fi video editors like Capcut, Videostar, Alight Motion, funimate, Canva, Riveo, Jitter, Capsule, Ozone, often used for social.
89
Velocity edits are incredibly popular on TikToK, like you can’t scroll ten videos without seeing five.
Haylo Hayley
Velocity
Social
Adidas
gifs/webp
Feng Chen Wang
Lo-fi video refers to content that is captured on a mobile device. It's lower quality, often behind the scenes or on the go, and requires minimal production and is sometimes imitated.
gifs/webp
Hi-fi
Hi-fi video is high-quality, professional-feeling video content that usually has an entire production crew behind it.
gifs/webp
TikTok
Grub Street
94
Instagram forced food to make for pristine, dramatic static images, now, TikTok requires moments of motion and "activation" because of video.
How TikTok took over the menu
Trends
@chaykak
Trends
Video grids
95
Shot list
Stocky’s motion guidelines
AI video
Ozone
gifs/webp
AI video
Adobe’s project fast fill
Trends
AI Prompt Animator job on Gilga.com, Danny Glover’s production website in 2023. “Someone active in the AI animation space”.
AI
gifs/webp
Trends
Spatial commerce
101
Our studies show that when you have a 3D model, it can convert much, much higher [...] more readily, than if you just had video and imagery, a 94% lift.
Trends
Shopify
102
Once you’ve got a 3D object you can turn it into videos and stills, view it in AR, animate it however you like, all from any angle.
3D objects
Farhan Thawar, Shopify
103
AI tools
Video
Introduction
Frames
Weight
Slack 3mb
Resolution
Multiple
WebP
AVIF
Gmail
Secondary
LCP
No header
Lazy loading
Player controls
Pause, stop, hide
Reduced motion
Three flashes
Type
layerRenamer
FFmpeg
GifGun
Motion tools
Motion specs
Otto
Pinterest by DIA
Tokyo Dome
Video editors
TikTok
Apple obj. capture
Spatial commerce
3D models
AI tools
Video content
105
Anna Yeaman
thanks