Back to Webfundamentals

Slick web animations {: .page-title }

src/content/en/shows/polycasts/season-2/WebAnimations.md

0.32.1 KB
Original Source

project_path: /web/_project.yaml book_path: /web/shows/_book.yaml description: Web Animations are a new set of standards to unify CSS and JavaScript animations. With Web Animations you get the power of animating on the GPU while maintaining the control of working in JavaScript.

{# wf_updated_on: 2015-08-11 #} {# wf_published_on: 2015-08-11 #} {# wf_youtube_id: https://youtu.be/Lwvi1u4XXzc #}

Slick web animations {: .page-title }

<div class="video-wrapper"> <iframe class="devsite-embedded-youtube-video" data-video-id="https://youtu.be/Lwvi1u4XXzc" data-autohide="1" data-showinfo="0" frameborder="0" allowfullscreen> </iframe> </div>

Web Animations are a new set of standards to unify CSS and JavaScript animations. With Web Animations you get the power of animating on the GPU while maintaining the control of working in JavaScript. But coordinating all these animations is no easy task and thankfully there’s an element for that—well a behavior actually but stay with me!

In this episode I’ll teach you how to use the neon-animation behaviors from the Polymer Element catalog to mixing slick animation behavior without the hassle of managing everything yourself. And with this knowledge we’re all setup to learn about the legendary neon-animated-pages element in a following episode.

##Read More

###Project source https://github.com/Polymer/polycasts/tree/master/ep23-neon-animation/login-panel

###Neon Animation Docs https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages

###Neon Animation Guide https://elements.polymer-project.org/guides/using-neon-animations

###Custom icons with Iron Iconsets -- Polycasts #22 https://www.youtube.com/watch?v=tjmRUgUca1g&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

###Behaviors -- Polycasts #21 https://www.youtube.com/watch?v=YrlmieL3Z0k&index=1&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

###Iron Icons -- Polycasts #20 https://www.youtube.com/watch?v=6kkNgVG6LuI&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=1

###More information