SlideShare a Scribd company logo

Alice in Web Animations API Land

Animation is back in the web development tool chest! We know of declarative CSS Animations and Transitions and fully featured JavaScript animation libraries like GreenSock, but there's a third, dynamic option: the Web Animation API! In this talk Rachel Nabors will take you on a magical journey with Alice from Wonderland to show you how this new API is used to run the CSS Animations in your browser and how you can use it to generate and manipulate animations in your project. Colorful, interactive, useful fun for all disciplines.

1 of 120
Download to read offline
with
@RachelNabors
& Alice
devtoolschallenger.com
lightningdesignsystem.com/design/motion
Alice in Web Animations API Land
It’strue.rachelthegreat.com
Alice in Web Animations API Land

Recommended

Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
 
Edward segel interactive_storytelling
Edward segel interactive_storytellingEdward segel interactive_storytelling
Edward segel interactive_storytellingKristen Chan
 
From Idea to Execution: Spotify's Discover Weekly
From Idea to Execution: Spotify's Discover WeeklyFrom Idea to Execution: Spotify's Discover Weekly
From Idea to Execution: Spotify's Discover WeeklyChris Johnson
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasminePaulo Ragonha
 
JS.Chi CSS Animations
JS.Chi CSS AnimationsJS.Chi CSS Animations
JS.Chi CSS AnimationsJustin Meyer
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
 

More Related Content

Similar to Alice in Web Animations API Land

Leave end-to-end testing to Capybara
Leave end-to-end testing to CapybaraLeave end-to-end testing to Capybara
Leave end-to-end testing to CapybaraHiroshi SHIBATA
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animationsasjb
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform wellAnna Migas
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)창석 한
 
NUS iOS Swift Talk
NUS iOS Swift TalkNUS iOS Swift Talk
NUS iOS Swift TalkGabriel Lim
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsMo Jangda
 
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN][Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]崇之 清水
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScriptNone
 
Reasons To Love Ruby
Reasons To Love RubyReasons To Love Ruby
Reasons To Love RubyBen Scheirman
 
React & Radium (Colin Megill)
React & Radium (Colin Megill) React & Radium (Colin Megill)
React & Radium (Colin Megill) Future Insights
 
Practical CSS3 Animations
Practical CSS3 AnimationsPractical CSS3 Animations
Practical CSS3 AnimationsAmber Makeyev
 
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...Codemotion
 
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)Shift Conference
 
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018Codemotion
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsIgnacio Martín
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Knowgirish82
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well Anna Migas
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Brian Sam-Bodden
 

Similar to Alice in Web Animations API Land (20)

Leave end-to-end testing to Capybara
Leave end-to-end testing to CapybaraLeave end-to-end testing to Capybara
Leave end-to-end testing to Capybara
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animations
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform well
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)
 
NUS iOS Swift Talk
NUS iOS Swift TalkNUS iOS Swift Talk
NUS iOS Swift Talk
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
 
Angular animate
Angular animateAngular animate
Angular animate
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
 
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN][Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]
[Hatsune Miku] Shoot Frieza with Amazon Kinesis ! [EN]
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
Reasons To Love Ruby
Reasons To Love RubyReasons To Love Ruby
Reasons To Love Ruby
 
React & Radium (Colin Megill)
React & Radium (Colin Megill) React & Radium (Colin Megill)
React & Radium (Colin Megill)
 
Practical CSS3 Animations
Practical CSS3 AnimationsPractical CSS3 Animations
Practical CSS3 Animations
 
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...
James Thomas - Serverless Machine Learning With TensorFlow - Codemotion Berli...
 
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)
A, B, C. 1, 2, 3. Iterables you and me - Willian Martins (ebay)
 
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018
Sweet Web Animations API - Rodolfo Dias - Codemotion Rome 2018
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
 
jQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't KnowjQuery - 10 Time-Savers You (Maybe) Don't Know
jQuery - 10 Time-Savers You (Maybe) Don't Know
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
 
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
Server-Side Push: Comet, Web Sockets come of age (OSCON 2013)
 

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
 
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web designThe Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web designRachel Nabors
 
Communicating animation slides
Communicating animation slidesCommunicating animation slides
Communicating animation slidesRachel Nabors
 
A Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual CortexA Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual CortexRachel Nabors
 
State of the Animation
State of the AnimationState of the Animation
State of the AnimationRachel Nabors
 
Animating the User Experience
Animating the User ExperienceAnimating the User Experience
Animating the User ExperienceRachel 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 (13)

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
 
The Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web designThe Web in Motion: animation's impact on UI and web design
The Web in Motion: animation's impact on UI and web design
 
Communicating animation slides
Communicating animation slidesCommunicating animation slides
Communicating animation slides
 
A Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual CortexA Brief Introduction to Animation, UI and the Visual Cortex
A Brief Introduction to Animation, UI and the Visual Cortex
 
State of the Animation
State of the AnimationState of the Animation
State of the Animation
 
Animating the User Experience
Animating the User ExperienceAnimating the User Experience
Animating the User Experience
 
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

Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxRawalRafiqLeghari
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revampvidya934261
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfLizShek
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfLizShek
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxTafshirul Alam
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 

Recently uploaded (20)

Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptx
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
homescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamphomescreen revamp homescreen revamphomescreen revamp
homescreen revamp homescreen revamphomescreen revamp
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
Amadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdfAmadeus Hang and Cable Layouts UNCSA.pdf
Amadeus Hang and Cable Layouts UNCSA.pdf
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdf
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
 
Maximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap DesignMaximize Your Brand Impact with a Box Truck Wrap Design
Maximize Your Brand Impact with a Box Truck Wrap Design
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 

Alice in Web Animations API Land