SlideShare a Scribd company logo
1 of 102
Download to read offline
@RachelNabors
.com
AirBnBApp
airbnb.com
AmazonCartApp
amazon.com
DuolingoApp
duolingo.com
the web in motion
with @RachelNabors
The Past, Present, and Future of Web Anima6on
• How anima5on helps our users
• Where has web anima5on been
• And how this impacts how we build the web
The High Road through
the Brain’s GPU
!me
loca!on
Animation is a
visual representation of a
rate of change over time.
We can use anima6on to indicate an element’s…
Direction Solidity Momentum
Relationships Structure Cause & Effect
These combine to reinforce…
RachelNabors.com
Jump Cut
From film, when the camera cuts directly to
a different perspec7ve.
InnerSanctum,1948
DropdowncourtesyofCodrops.
In-betweening
From anima7on, extrapola7ng between
two key frames.
What just
happened?
ScottE.HudsonandJohnT.Stasko
(1993)
“By offloading interpreta6on of changes to
the perceptual system, anima6on allows the
user to con6nue thinking about the task
domain, with no need to shiC contexts to the
interface domain. By elimina6ng sudden
visual changes, anima6on lessens the chance
that the user is surprised.”
WindowsCEMobilePhoneUI
TouchPhone…with…stylus…
Animacy
How “alive” something appears to be.
It’sAlive!AnimateMotionCaptures
Attention(2010)
“(T)hese speeded responses appeared to be
due to the perceived animacy of the objects…
We conclude that animate mo6on does
indeed capture visual aKen6on.”
If you want someone to
notice something, make it
bright and jiggly.
cracked.com/article_15239_the-5-most-
annoying-banner-ads-internet_p5.html
Animacy and our Cone of Vision
When everything vies for
our attention, nothing
commands our attention.
A Brief History of Web Animation
Birth of SMIL, 1999
SMIL
Birth of CSS Animations and Transitions, 2009
CSS
Transi6ons
CSS
Anima6ons
CSS
Transi6ons
CSS
Anima6ons
SMIL
Seriously?
Internet Explorer’s Reaction
One API to Rule Them All
CSS
Transi6ons
CSS
Anima6ons
SMIL
?
Some years later…
?
Web
Anima6ons
API
CSS
Transi6ons
CSS
Anima6ons
SMIL
CSS
Transi6ons
CSS
Anima6ons
SMIL
?
Web
Anima6ons
API
la mort de SMIL, 2015
cdpn.io/MwYMJe
cdpn.io/GZpREz
cdpn.io/PNYGZQ
rachelnabors.com/waapi
Support for the Web Animations API
Let’s do this.
Well, if you’re
serious.
github.com/web-animations/web-animations-js

The
Impact of Motion on the Web
Firefox’stoolsat
DevToolsChallenger.com
Chrome’sanimaRontooling
Sites using CSS anima6ons and transi6ons
• animation 37.2037%
• webkit-animation 39.8729%
• transition 51.0801%
• webkit-transition 45.6491%
• justify-content 40.0321%
• text-transform 51.9612%
chromestatus.com/metrics/css/popularity
mojs.io
snapsvg.io
d3js.org
threejs.org
greensock.com
ibm.com/design
LightningDesignSystem.com
Storyboards
StoryboardforFerdinandtheBulltakenatthe
DisneyFamilyHomeMuseum
Internal use storyboard for
DevToolsChallenger.com
Mystoryboardtemplate

goo.gl/PyBXI7
Animatics
“An animation is worth a
thousand meetings.”
SpaceUnicornanimaRcusedwithpermission
ofBrianneDrouhardaka@potatofarmgirl
loadingspinnerideafromlunch
Animatics are NOT deliverables.
Prototypes
invisionapp.com
principleformac.com
framerjs.com
Moving Forward
alovelikepi.com
google.com/design/spec/motion
DuolingoApp
duolingo.com
Animation belongs to all of us now.
Let us set the web in motion together.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors
.com

More Related Content

Similar to The Web in Motion: animation's impact on UI and web design

Gauthier_digitaldesign_portfolios
Gauthier_digitaldesign_portfoliosGauthier_digitaldesign_portfolios
Gauthier_digitaldesign_portfoliosJean-Marc Gauthier
 
Action Genome: Action As Composition of Spatio Temporal Scene Graphs
Action Genome: Action As Composition of Spatio Temporal Scene GraphsAction Genome: Action As Composition of Spatio Temporal Scene Graphs
Action Genome: Action As Composition of Spatio Temporal Scene GraphsSangmin Woo
 
Web Animations
Web AnimationsWeb Animations
Web Animationsbsuresh2
 
Deep Learning for Structure-from-Motion (SfM)
Deep Learning for Structure-from-Motion (SfM)Deep Learning for Structure-from-Motion (SfM)
Deep Learning for Structure-from-Motion (SfM)PetteriTeikariPhD
 
Motion graphics Terminology
Motion graphics TerminologyMotion graphics Terminology
Motion graphics TerminologyJoe Nasr
 
Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experiencesaya4
 
Advanced animation techniques
Advanced animation techniquesAdvanced animation techniques
Advanced animation techniquesCharles Flynt
 
A deep learning facial expression recognition based scoring system for restau...
A deep learning facial expression recognition based scoring system for restau...A deep learning facial expression recognition based scoring system for restau...
A deep learning facial expression recognition based scoring system for restau...Venkat Projects
 
CV_sarah_frisken_05.15.2016
CV_sarah_frisken_05.15.2016CV_sarah_frisken_05.15.2016
CV_sarah_frisken_05.15.2016Sarah Frisken
 
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMoved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMilen Dyankov
 
Cartoonization of images using machine Learning
Cartoonization of images using machine LearningCartoonization of images using machine Learning
Cartoonization of images using machine LearningIRJET Journal
 

Similar to The Web in Motion: animation's impact on UI and web design (20)

Animation
AnimationAnimation
Animation
 
Gauthier_digitaldesign_portfolios
Gauthier_digitaldesign_portfoliosGauthier_digitaldesign_portfolios
Gauthier_digitaldesign_portfolios
 
Presentation1
Presentation1Presentation1
Presentation1
 
Action Genome: Action As Composition of Spatio Temporal Scene Graphs
Action Genome: Action As Composition of Spatio Temporal Scene GraphsAction Genome: Action As Composition of Spatio Temporal Scene Graphs
Action Genome: Action As Composition of Spatio Temporal Scene Graphs
 
Intro
IntroIntro
Intro
 
Web Animations
Web AnimationsWeb Animations
Web Animations
 
Deep Learning for Structure-from-Motion (SfM)
Deep Learning for Structure-from-Motion (SfM)Deep Learning for Structure-from-Motion (SfM)
Deep Learning for Structure-from-Motion (SfM)
 
Waymo Essay
Waymo EssayWaymo Essay
Waymo Essay
 
Animation
AnimationAnimation
Animation
 
Motion graphics Terminology
Motion graphics TerminologyMotion graphics Terminology
Motion graphics Terminology
 
Unit vi
Unit viUnit vi
Unit vi
 
Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experience
 
Final Paper
Final PaperFinal Paper
Final Paper
 
Advanced animation techniques
Advanced animation techniquesAdvanced animation techniques
Advanced animation techniques
 
AR/SLAM for end-users
AR/SLAM for end-usersAR/SLAM for end-users
AR/SLAM for end-users
 
A deep learning facial expression recognition based scoring system for restau...
A deep learning facial expression recognition based scoring system for restau...A deep learning facial expression recognition based scoring system for restau...
A deep learning facial expression recognition based scoring system for restau...
 
CV_sarah_frisken_05.15.2016
CV_sarah_frisken_05.15.2016CV_sarah_frisken_05.15.2016
CV_sarah_frisken_05.15.2016
 
Vfx PPT
Vfx PPTVfx PPT
Vfx PPT
 
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmxMoved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
Moved to https://slidr.io/azzazzel/web-application-performance-tuning-beyond-xmx
 
Cartoonization of images using machine Learning
Cartoonization of images using machine LearningCartoonization of images using machine Learning
Cartoonization of images using machine Learning
 

More from Rachel Nabors

The browser is not a document reader!
The browser is not a document reader!The browser is not a document reader!
The browser is not a document reader!Rachel Nabors
 
Accessible UI Animation
Accessible UI AnimationAccessible UI Animation
Accessible UI AnimationRachel Nabors
 
Design is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 KeynoteDesign is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 KeynoteRachel Nabors
 
Alice in Web Animations API Land
Alice in Web Animations API LandAlice in Web Animations API Land
Alice in Web Animations API LandRachel Nabors
 
Communicating animation slides
Communicating animation slidesCommunicating animation slides
Communicating animation slidesRachel Nabors
 
Word Press Security Talk
Word Press Security TalkWord Press Security Talk
Word Press Security TalkRachel Nabors
 
Wabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfectionWabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfectionRachel Nabors
 
Fizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and PikachuFizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and PikachuRachel Nabors
 

More from Rachel Nabors (10)

Vue in Motion
Vue in MotionVue in Motion
Vue in Motion
 
The browser is not a document reader!
The browser is not a document reader!The browser is not a document reader!
The browser is not a document reader!
 
Accessible UI Animation
Accessible UI AnimationAccessible UI Animation
Accessible UI Animation
 
Design is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 KeynoteDesign is not a bug ticket - All Things Open 2016 Keynote
Design is not a bug ticket - All Things Open 2016 Keynote
 
Career Offroading
Career OffroadingCareer Offroading
Career Offroading
 
Alice in Web Animations API Land
Alice in Web Animations API LandAlice in Web Animations API Land
Alice in Web Animations API Land
 
Communicating animation slides
Communicating animation slidesCommunicating animation slides
Communicating animation slides
 
Word Press Security Talk
Word Press Security TalkWord Press Security Talk
Word Press Security Talk
 
Wabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfectionWabi-sabi: the beauty of imperfection
Wabi-sabi: the beauty of imperfection
 
Fizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and PikachuFizzled Durham 2010: Social Media and Pikachu
Fizzled Durham 2010: Social Media and Pikachu
 

Recently uploaded

Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 

Recently uploaded (20)

Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 

The Web in Motion: animation's impact on UI and web design