how to target sharedElements inside on a custom-element using neon-animated-pages - polymer-1.0

Question

i want to use hero-animation but the target of shared elements is inside on a custom-element, and i dont know the correct syntax for this.
in the incoming page:
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'hero-animation',
id: 'hero',
toPage: this
}
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.$.hero
}
}
}
}
In the outgoing page:
properties: {
animationConfig: {
value: function() {
return {
'exit': {
name: 'hero-animation',
id: 'hero',
toPage: this
}
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.(custom element).$.hero??????
}
}
}

Answer 1

It's a little late, but as I had the same problem, I want to share my results:
I also was wondering how to add a button from a nested custom element to my id in sharedElements. As my intention was, that each element in polymer can "live" on it's own without any "hard-coded" dependencies to other elements, I do not wanted to reach the goal with document.querySelector etc. as this can throw errors when I remove the element containing this button.
The possibility I tried and which was working is over firing events.
The custom element containing the button fires an event on click or tab.
fireOnClick: function(e, detail) {
this.fire('wasclickedevent', {someProperties: ""});
}
Within the "Outgoing Page" - the page where the hero animation starts, I dynamically add the "sharedElements" Properties to my element, after I catched the event:
listeners: {
'wasclickedevent': '_changeSharedElement'
},
_changeSharedElement: function(e) {
this.sharedElements = {
'hero': e.target
}
},
Thats it. The hero animation works. To decouple the elements more, you can also add the entry and exit animations dynamically, as otherwise if there is no event and it exits the page, you wil get an error, that the fromPage is not found.
Hope that helps.

Answer 2

There is some code missing from your polymer element animationConfig property
In the incoming page
Polymer({
is: 'detail-page',
behaviors: [Polymer.NeonSharedElementAnimatableBehavior],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'hero-animation',
id: 'hero',
toPage: this
}, {
name: 'fade-in-animation',
node: this
}],
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.$.header
}
}
}
}
});
In the outgoing page
Polymer({
is: 'main-page',
behaviors: [Polymer.NeonSharedElementAnimatableBehavior],
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'scale-up-animation',
node: this
},
'exit': [{
name: 'hero-animation',
id: 'hero',
fromPage: this
}, {
name: 'fade-out-animation',
node: this
}]
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.$.circle
}
}
}
}
});
You refer to your custom element using an ID attribute in your custom element HTML structure. The ID inside your polymer element creation in javascript ties the animationConfig and sharedElements properties of your polymer element. In the example above, the ID attribute of the custom element is header and circle, respectively.
Please post your HTML code also so we can take a better look.