Polymer Hero Animation In Reverse

Question

I cannot seem to figure out how to smoothly animate back to the originator of a hero animation. By that I mean, I have paper-card with a bunch of html (img, text, ect) on it, which I can "hero" into another element fine; but I'd like to be able to "anti-hero" back to the (much smaller) paper-card smoothly. My attempts only produce very distorted backwards transitions. The effect I'm trying to imitate is from Google's 2015 IO under the "Featured Sections". Google displays a grid of thumbnails, that when clicked, hero into youtube videos. Pressing the back arrow anti-heros back to the Featured Sections grid...smoothly. Any thoughts?

I'm sorry for the code blocks, I don't have enough reputation to display something.

My animationConfig is

animationConfig: {
    value: function() {
        return {
            'entry': [{
                name: 'cascaded-animation',
                animation: 'scale-up-animation'
            },
            {
                name: 'hero-animation',
                id: 'hero',
                toPage: this
            }],

        'exit': [{
            name: 'cascaded-animation',
            animation: 'scale-down-animation'
        },
        {
            name: 'hero-animation',
            id: 'hero',
            fromPage: this
        }]
        }
    }
}

And when a tap event is fired by clicking on an item, I fade out all remaining items and hero the clicked item.

_onItemTap: function(event) {
    var nodes = this.$.scrollUp.children;
    var nodesToScale = [];

    for(var node, index = 0; node = nodes[index]; index++) {
        if (node !== event.detail.item) {
            nodesToScale.push(node);
        }
    }

    this.animationConfig['entry'][0].nodes = nodesToScale;
    this.animationConfig['exit'][0].nodes = nodesToScale;
    this.sharedElements = {'hero': event.detail.item};
    this.fire('feed-item-tap', {item: event.detail.item, data: event.detail.data});
}

This renders just fine. Element2's innerHTML is faded in upon entry in order to appear more graceful.

animationConfig: {
    value: function() {
        return {
            'entry': [{
                name: 'cascaded-animation',
                animation: 'fade-in-animation',
                nodes: [this.$.bio, this.$.pic],
                timing: {delay: 500, duration: 2000}
            },
            {
                name: 'hero-animation',
                id: 'hero',
                toPage: this
            }],

            'exit': [{
                name: 'hero-animation',
                id: 'hero',
                fromPage: this
            }]
        }
    }
}

sharedElements: {
    value: function() {
        return {
            'hero': this.$.more_details
        }
    }
}

Again, the animations do occur both ways, but the hero from element2 back to element1 does not mimic the behavior on Google's IO site.

I see what you mean. Are are you working with Neon elements? If I were you, I'd post the code + link to example. — The Onin, Sep 07 '15 at 16:46
I am working with neon elements. I stemmed the code to the sections which I presume are most relevant. Thanks in advance. — mvhatch, Sep 07 '15 at 17:16

score 0 · Answer 1 · answered Dec 11 '15 at 01:50

You are applying two animations on entry with cascading and delay while at the same time playing the hero animation.

Try to make it simpler using the hero animation only. The animation on Google's IO page looks like a simple hero.

Like this:

animationConfig: {
  value: function() {
    return {
      'entry': {
        name: 'hero-animation',
        id: 'hero',
        toPage: this
      },

      'exit': {
        name: 'hero-animation',
        id: 'hero',
        fromPage: this
      }
    }
  }
},

sharedElements: {
  value: function() {
    return {
      'hero': this.$.more_details
    }
  }
}

Polymer Hero Animation In Reverse

1 Answers1