<m-attr-anim>

The m-attr-anim element is used to describe document time-synchronized changes to element attributes.

Try it

Attributes

  • attr: string

    The attribute of the parent element that this animation will animate.

  • start: undefined

    The value of the attribute that the animation should start at.

  • end: undefined

    The value of the attribute that the animation should end at.

  • start-time: int

    The time in milliseconds since the start of the document lifecycle when the animation should start playing. Default value is 0.

  • pause-time: int

    The time in milliseconds since the start of the document lifecycle when the animation should pause. This animation will be considered active if the pause-time has passed. If there is no value the animation will not be paused.

  • duration: int

    The duration of the animation in milliseconds. This is the time taken to go from the start value to the end value (unless ping-pong is enabled). Default value is 1000 (1 second).

  • loop: boolean

    Whether this animation should loop indefinitely. Default value is true.

  • easing: enum

    easeInQuad

    easeOutQuad

    easeInOutQuad

    easeInCubic

    easeOutCubic

    easeInOutCubic

    easeInQuart

    easeOutQuart

    easeInOutQuart

    easeInQuint

    easeOutQuint

    easeInOutQuint

    easeInSine

    easeOutSine

    easeInOutSine

    easeInExpo

    easeOutExpo

    easeInOutExpo

    easeInCirc

    easeOutCirc

    easeInOutCirc

    easeInElastic

    easeOutElastic

    easeInOutElastic

    easeInBack

    easeOutBack

    easeInOutBack

    easeInBounce

    easeOutBounce

    easeInOutBounce

    The name of the easing function to apply to the animation ratio to achieve effects such as smooth animations. If the attribute is not specified or is empty the animation will be linear.

  • ping-pong: boolean

    Whether this animation should go from the start value to the end value, and then return to the start value, all within the time specified by the duration attribute. Default value is false.

  • ping-pong-delay: float

    If ping-pong is true then the ping-pong-delay attribute specifies the time in milliseconds that the animation should pause at the start and end values. This time is part of the overall duration (it does not extend the time taken), and as the ping-pong-delay is the time held at both start and end, the total time where the value is held is double the value of ping-pong-delay. Default value is 0.

Attribute Groups

  • Attribute Group: coreattrs

    • id: ID

      A unique identifier for the element, used for selection and manipulation through scripting. It must be unique within the document.

    • class: string

      A space-separated list of class names that can be used for scripting purposes.

Compatibility Table

WEBUNREAL
m-attr-anim✓✓
attr✓✓
start✓✓
end✓✓
start-time✓✓
pause-time✓✓
duration✓✓
loop✓✓
easing✓✓
ping-pong✓✓
ping-pong-delay✓✓
id✓✓
class✓✓