Slick web animations -- Polycasts #23
Why Stack Overflow recommends it
Stack Overflow users link it when answering Polymer questions about neon-animation, custom animations and animation-finish events, since it explains the concepts and behaviors before people touch the API docs.
Recommended by 3 people across 4 different months, 2015 to 2016.
What it is
Episode 23 of Google's Polycasts series, presented by Rob Dodson, introduces the Web Animations standards and shows how to use Polymer's neon-animation behaviors to compose GPU-backed animations in JavaScript. It walks through a login panel example and sets up a follow-up episode on neon-animated-pages.
What people said
Strong rec Ben Thomas · 2015-08 · Stack Overflow · on “How to use Polymer animations?”
The best places to start are this [LINK] documentation from the Polymer Elements catalog and this [this video] excellent tutorial video from Google.
Strong rec Ben Thomas · 2015-08 · Stack Overflow · on “How to use Polymer animations?”
The best places to start are this [LINK] documentation from the Polymer Elements catalog and this [this video] excellent tutorial video.
Strong rec jean Pokou · 2015-10 · Stack Overflow · on “Polymer Custom Animations”
There is an element for that! it is called neon-animation, you can find it in the Polymer's Catalog : neon-animations [LINK] neon animations provide pre-defined animations you can use in your web app, but first you need to understand the concept of web animation in the Polymer world. There is no better tutorial than these three videos on animations done by Rob Dodson: Behaviours [LINK] Slick Web Animations [this video] neon-Animated Pages [LINK] Its recommended, no its vital you watch them in order
Recommends Ben Thomas · 2015-08 · Stack Overflow · on “Neon animation end of animation event?”
In neon-animation-runner-behavior , when the animation is complete, the event neon-animation-finish is fired. You can add a listener for this in your element which will call a function when the event is fired. For instance: <script> Polymer({ is: "my-animated-element", behaviors: [ Polymer.NeonAnimationRunnerBehavior ], properties: { animationConfig: { value: function () { // config here } } }, listeners: { 'neon-animation-finish': '_onNeonAnimationFinish' }, _onNeonAnimationFinish: function () { alert("animation finished!"); } }); </script> More info on how to use the neon-animation elements can be found in this [this video] awesome video.
Recommends Ben Thomas · 2015-08 · Stack Overflow · on “Neon animation end of animation event?”
You can add a listener for `neon-animation-finish` which then calls a function. Check out #23 of the Polycasts series here [this video] which has some great info on how to use neon-animations
Recommends Ben Thomas · 2015-10 · Stack Overflow · on “Polymer Custom Animations”
Have a look at this [this video] great video produced by Google that talks about animation with Polymer. There is already and element called `neon-animation` (docs here [LINK] ) that contains lots of useful animations for you to use. This video will also show you how you can write your own animations and use them.
Recommends Ben Thomas · 2015-12 · Stack Overflow · on “animate from list to detail with background in header”
Two good places to start are this [LINK] video on `neon-animated-pages` and this [this video] video on `neon-animation`.
Recommends James Hurford · 2016-04 · Stack Overflow · on “How do I get neon-animation to work in Polymer Dart 1.0”
You asked for a link to a tutorial for the JavaScript version. Here's one [LINK] and here's another [this video] There are others, but Rob Dodson does a good job of covering what you need to know.
Cites vvMINOvv · 2016-01 · Stack Overflow · on “how and when to set animationConfig on a paper-dialog”
I have a paper-dialog inside of another element looking like: <paper-dialog id="modal" modal> <h2>Login</h2> <p>Lorem......</p> <div class="buttons"> <paper-button dialog-confirm autofocus>Login</paper-button> </div> </paper-dialog> I could declaratively add entry-animation and exit-animation but I'm really trying to do two effects at once like it shows in the docs [LINK] I tried using something like: this.$.modal.animationConfig = {....}; //like the docs and I set node to this.$.modal , but I'm pretty certain it doesn't read that variable at all because when I check this.$.modal.getAnimationConfig('exit') (or entry ) I get nothing. So where in the lifecycle can I do something like this. The