2.0 preview - sample usage

[sowsan]

I'm trying to use the neon animations in 2.0 Polymer element, looking at the 2.0 preview branch it still look like the early version of Polymer. Came to know that the behaviors are not avaiable in 2.0, any sample / demo on how can I integrate neon-animation withe Polymer 2.0 custom elements?

Thanks,
Sowmyan

[samuelcardillo]

The neon-animations behaviors are available as hybrid behaviors, but not as class mixins. So you have to add them to your class-style element using the Polymer.mixinBehaviors function, like this:

class MyApp extends Polymer.mixinBehaviors([Polymer.NeonAnimationRunnerBehavior, Polymer.NeonSharedElementAnimatableBehavior], Polymer.Element) {}

instead of

class MyApp extends Polymer.Element {}

Also, you have to bower i --save web-animations/web-animations-js and write an additional import: <link rel="import" href="../bower_components/neon-animation/web-animation.html">

[sowsan]

Thank you so much for the insights...are we going to get all these kind of changes documented ?

[stackt52]

@samuelcardillo Thanks for the solution, also had a similar challenge, but I don't know how I can reference a child node as a node to animate in my animationConfig property. When use the automatic node finding like this.$.childElementId I'm getting an error when I run my app:

And my element def is like this:

I'm assuming the animationConfig property is being parsed before my element is upgraded. And I've tried moving the animationConfig property assignment task in a connectedCallback lifecycle method but still its not working. So, how can I make such a design pattern work?

[samuelcardillo]

Hey @stackt52 , its because you need to give a NodeList in nodes. For that, use a querySelectorAll.

In your case, you could do something like : Polymer.dom(this.root).querySelectorAll("#badge"); (if you console.dir it, you will see it will be stored in a NodeList even if you only have one result)

PS: The "Polymer.dom(this.root)" is to access the DOM of your element. If you do document.querySelectorAll then the chances that it works are equal to zero as your #badge is nested in the shadow dom of your element.

[JoelCode]

Try this!
this.shadowRoot.querySelector('#badge');

[stackt52]

When I try @samuelcardillo solution I'm getting console warnings like below, and the animation is not playing.

.. and @JoelCode solution I'm getting errors.

And when I try to console.log this.shadowRoot.querySelector('#badge') in my properties() method Im getting an error:

... but when i try to log it in my connectedCallback() method it's working just fine.

Output:

My assumption is that maybe it's because the properties() method is defined as a static method, and is therefore class scoped. But again if that is the case, how can then someone reference a child node this.$.childElementId to animate in the animationConfig property? which should be defined in the static properties() method. Or is referencing a child node not supported at all in Polymer 2.0 class-based elements?

[zliebersbach]

Turns out that feature has been deprecated: Polymer/polymer#4160
We need to set the properties in the ready callback instead, which is an inelegant pain in my opinion.

[stackt52]

@wincinderith Thanks for that note, though it doesn't seem to work for the animationConfig property. I'm getting warnings when the animationConfig property is defined anywhere else apart from the properties() method, and the animation is not even playing.

[zliebersbach]

@stackt52 Huh, that's odd. It's working fine for me in Firefox & Chromium. Here's the neon-animation relevant parts of my element definition.
Mixins;

class LoginButtonElement extends Polymer.mixinBehaviors([
	Polymer.NeonAnimationRunnerBehavior,
	Polymer.NeonSharedElementAnimatableBehavior
], Polymer.Element) {

Setting properties in the ready callback;

ready() {
	super.ready();

	this.animationConfig = {
		"authStart": [{
			name: "ripple-animation",
			id: "ripple",
			fromPage: this
		}, {
			animatable: this.$.authScreen,
			type: "authStart"
		}]
	};
	this.sharedElements = {
		ripple: this.$.button
	};
}

[stackt52]

@wincinderith thank you very much for the clarification, you've saved me from the process of reinventing the wheel (actually I even started rewriting my own animation package). Before I was initialising the animationConfig property with a value of an object return from a function:

... and after some changes according to your code:

and it now works!!
Thanks big time

[diegolz]

I'm trying the way @wincinderith suggests and get the following warning message:
legacy-element-mixin.html:867 [undefined::playAnimation] Please put 'animationConfig' inside of your components 'properties' object instead of outside of it.
Also the animation is not happening at any time.

UPDATE
I used the animations from the neon-animated-pages tag with entry and exit animation attrs. And it showed me the KeyFrameEffect not defined error. Fixed it importing web-animations-js. Now everything works but it is quite messy indeed.

[ShaggyDude]

@samuelcardillo I'm still confused as f. Should your import be
<link rel="import" href="../../web-animations-js/web-animations.html">
instead of
<link rel="import" href="../../neon-animation/web-animation.html">
??

[e111077]

Heya @ShaggyDude , the neon-animation/web-animations.html import simply points to web-animations-js/web-animations-next-lite.min.js so either would work.

Also @diegolz the KeyFrameEffect error is an odd quirk as it seems to have been dropped by chrome which is why the polyfill is necessary