Search code examples
javascriptpolymer-2.xpaper-elements

Configuring paper-ripple with "opacityDecayVelocity" attribute


The default timing set by paper ripple animation 0.8s makes the transition seem slower. Tried changing the value via :

<paper-ripple opacityDecayVelocity ="1.0"></paper-ripple> 

Adding $ as its an attribute

<paper-ripple opacityDecayVelocity$ ="1.0"></paper-ripple>  

None seems to work. Please suggest a way to configure the attribute value.


Solution

  • The attribute name should be opacity-decay-velocity

    <paper-ripple opacity-decay-velocity="1.0" ></paper-ripple>
    

    See Polymer Properties

    Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName. The same mappings happen in reverse when converting property names to attribute names