Polymer JS - Parametric neon-animation config

Question

I have a component - floating digit that animates from bottom to top. And this code is working perfectly fine:

<dom-module id="floating-digit">


<style>
    span.increment {
      display: none;
      font-size: 12px;
      font-weight: normal;
      position: absolute;
      right: -10px;
      top: 1.25em;
    }
  </style>

  <template>
    <span id="floater" class="increment">+[[digit]]</span>
  </template>

</dom-module>


<script>
  Polymer({
    is: "floating-digit",
    behaviors: [Polymer.NeonAnimationRunnerBehavior],
    properties: {
      digit: {
        type: String,
        value: "",
        observer: '_animateDigit'
      },
      transformFrom: {
        type: String,
        value: "translateY(0)"
      },
      transformTo: {
        type: String,
        value: "translateY(-100%)"
      },
      animationConfig: {
        value: function () {
          return {
            'animate': [
              {
                name: 'fade-in-animation',
                node: this.$.floater,
                timing: {duration: 100}
              },
              {
                name: 'transform-animation',
                node: this.$.floater,
                transformFrom: "translateY(0)",
                transformTo: "translateY(-100%)",
                timing: {duration: 1500}
              },
              {
                name: 'fade-out-animation',
                node: this.$.floater,
                timing: {duration: 2000, delay: 2000}
              },

            ]
          }
        }
      }
    },
    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish'
    },
    _animateDigit: function _animateDigit() {
      this.$.floater.style.display = "inline";
      this.playAnimation('animate');

    },
    _onNeonAnimationFinish: function _onNeonAnimationFinish() {
      this.$.floater.style.display = 'none';
    },
  })
</script>

But there are several places on my app where I want to use this component with different transformFrom and transformTo values.

That is why I added to my floating-digit properties transformTo and transformFrom, so I can parametrize them when I want those values to be different than default:

<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-80%)" digit="[[someNumber]]"></floating-digit>

I have changed animationConfig this way (only changed excerpt):

{
 name: 'transform-animation',
 node: this.$.floater,
 transformFrom: this.transformFrom,
 transformTo: this.transformTo,
 timing: {duration: 1500}
},

But it does not work. This function seems not to have access to all those properties defined in element.

console.log(this) inside function returning animationConfig object value properly identifies this as desired instance of <floating-digit>. Unfortunately, without properties that can be used for parametrizing configuration of animations. They remain undefined.

Any of you possibly have an idea how to access those parameters?

score 0 · Accepted Answer · answered Jun 29 '17 at 08:50

If anyone is interested I have found solution. Unfortunately this solution does not use Polymer to grab those parameters.

I am using native web API to do this: My animationConfig looks that way:

  animationConfig: {
    value: function () {
      let transformFrom = this.attributes.getNamedItem('transform-from') ? this.attributes.getNamedItem('transform-from').textContent : "translateY(0)";
      let transformTo = this.attributes.getNamedItem('transform-to') ? this.attributes.getNamedItem('transform-to').textContent : "translateY(-100%)";
      return {
        'animate': [
          {
            name: 'fade-in-animation',
            node: this.$.floater,
            timing: {duration: 100}
          },
          {
            name: 'transform-animation',
            node: this.$.floater,
            transformFrom: transformFrom,
            transformTo: transformTo,
            timing: {duration: 1500}
          },
          {
            name: 'fade-out-animation',
            node: this.$.floater,
            timing: {duration: 2000, delay: 2000}
          },
        ]
      }
    }
  }

And I am calling this same way as before:

<floating-digit id="floating-0" transform-from="translateY(-20%)" transform-to="translateY(-70%)" digit="5"></floating-digit>

If anyone have idea why this does not work properly, you are more than invited to share your solution.

Polymer JS - Parametric neon-animation config

1 Answers1