Polymer curved motion path

Question

As I was making some animations according to the Material Design Guidelines, I got stuck while making the curved motion path.

First of all, I am using Polymer to build as much of the project as possible. I want to implement an animation like shown in this video. The animation should run on a grid of elements, which are expanded to fill the screen upon click. This effect was shown best by the following video.

I have been trying some things with the neon-animation element and haven't found a way to do this easily.

I did find out about the Web Animations API and how motion paths are implemented using that, but couldn't find a way to get this to work together with the animations built with Polymer.

Another possible solution was to set a lot of keypoints in a custom animation, built with neon-animation. By setting enough points on the curve, it would be possible to make the curve occur as wanted.

My question is, what would be the easiest and best way to make a curved motion path animation upon clicking a random element of a grid?

pomber · Answer 1 · 2016-10-05T00:48:20.870

For a curved motion, you could use a combination of rotate and transform-origin.

This will animate an element with the same curved motion as your second video:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">

<script>

  Polymer({

    is: 'rotate-animation',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],

    configure: function(config) {
      var node = config.node;

      this._effect = new KeyframeEffect(node, [
        {'transform': 'none'},
        {'transform': 'rotate(90deg)'}
      ], this.timingFromConfig(config));

      if (config.transformOrigin) {
        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
      } else {
        this.setPrefixedProperty(node, 'transformOrigin', 'center -50vw');
      }

      return this._effect;
    }

  });

</script>

Polymer curved motion path

1 Answers1