DOMRenderer

rekapi. DOMRenderer

new DOMRenderer(rekapi)

rekapi.DOMRenderer allows you to animate DOM elements. This is achieved either by CSS @keyframe animations, or by per-frame inline style updates — keyframes are defined with the same API in either case. To render animations with the DOM, just supply any DOM element to the rekapi.Rekapi constructor. You may use document.body, since it is generally always available:

const rekapi = new Rekapi(document.body);

To use this renderer's API, get a reference to the initialized object:

const domRenderer = rekapi.getRendererInstance(DOMRenderer);

There are separate APIs for playing inline style animations and CSS @keyframe animations. For a detailed breakdown of how to choose between these two APIs and use rekapi.DOMRenderer effectively, check out the DOM Rendering in Depth tutorial.

Note: rekapi.DOMRenderer is added to rekapi.Rekapi#renderers automatically, there is no reason to call the constructor yourself in most cases.

Source:
Parameters:
Name Type Description
rekapi rekapi.Rekapi

The rekapi.Rekapi instance to render for.

Extends

Methods

canAnimateWithCSS() → {boolean}

Source:
Returns:
Type:
boolean

Whether or not the browser supports CSS @keyframe animations.

getCss(optionsopt) → {string}

Convert the animation to CSS @keyframes.

Source:
Parameters:
Name Type Attributes Default Description
options Object <optional>
 {}
Name Type Attributes Default Description
vendors Array.<string> <optional>
 ['w3']

The browser vendors you want to support. Valid values are:

  • 'microsoft'
  • 'mozilla'
  • 'opera'
  • 'w3'
  • 'webkit'
fps number <optional>
 30

Defines the number of CSS @keyframe frames rendered per second of an animation. CSS @keyframes are comprised of a series of explicitly defined steps, and more steps will allow for a more complex animation. More steps will also result in a larger CSS string, and more time needed to generate the string.
name string <optional>

Define a custom name for your animation. This becomes the class name targeted by the generated CSS.
isCentered boolean <optional>

If true, the generated CSS will contain transform-origin: 0 0;, which centers the DOM element along the path of motion. If false or omitted, no transform-origin rule is specified and the element is aligned to the path of motion by its top-left corner.
iterations number <optional>

How many times the generated animation should repeat. If omitted, the animation will loop indefinitely.
Returns:
Type:
string

isPlaying() → {boolean}

Source:
Returns:
Type:
boolean

Whether or not a CSS @keyframe animation is running.

play(iterationsopt, fpsopt)

Play the Rekapi animation as a CSS @keyframe animation.

Note that this is not the same as rekapi.Rekapi#play. That method controls inline style animations, while this method controls CSS @keyframe animations.

Source:
Parameters:
Name Type Attributes Description
iterations number <optional>

How many times the animation should loop. This can be null or 0 if you want to loop the animation endlessly but also specify a value for fps.
fps number <optional>

How many @keyframes to generate per second of the animation. A higher value results in a more precise CSS animation, but it will take longer to generate. The default value is 30. You should not need to go higher than 60.
Fires:

prerender(iterationsopt, fpsopt) → {string}

Prerender and cache the CSS animation so that it is immediately ready to be used when it is needed in the future. The function signature is identical to rekapi.DOMRenderer#play. This is necessary to play a CSS animation and will be automatically called for you if you don't call it manually, but calling it ahead of time (such as on page load) will prevent any perceived lag when a CSS @keyframe animation is started. The prerendered animation is cached for reuse until the timeline or a keyframe is modified.

Source:
Parameters:
Name Type Attributes Description
iterations number <optional>

How many times the animation should loop. This can be null or 0 if you want to loop the animation endlessly but also specify a value for fps.
fps number <optional>

How many @keyframes to generate per second of the animation. A higher value results in a more precise CSS animation, but it will take longer to generate. The default value is 30. You should not need to go higher than 60.
Returns:
Type:
string

The prerendered CSS string. You likely won't need this, as it is also cached internally.

setActorTransformOrder(actor, orderedTransforms) → {rekapi.Rekapi}

You can decouple transform components in order to animate each property with its own easing curve:

actor
  .keyframe(0, {
    translateX: '0px',
    translateY: '0px',
    rotate: '0deg'
  })
  .keyframe(1500, {
    translateX: '200px',
    translateY: '200px',
    rotate: '90deg'
  }, {
    translateX: 'easeOutExpo',
    translateY: 'easeInSine',
    rotate: 'elastic'
  });

CSS transform string components are order-dependent, but JavaScript object properties have an unpredictable order. Rekapi must combine transform properties supplied to rekapi.Actor#keyframe (as shown above) into a single string when it renders each frame. This method lets you change that order from the default.

However, if you prefer a more standards-oriented approach, Rekapi also supports combining the transform components yourself, obviating the need for rekapi.DOMRenderer#setActorTransformOrder entirely:

actor
  .keyframe(0, {
    transform: 'translateX(0px) translateY(0px) rotate(0deg)'
  })
  .keyframe(1500, {
    transform: 'translateX(200px) translateY(200px) rotate(90deg)'
  }, {
    transform: 'easeOutExpo easeInSine elastic'
  });
Source:
Parameters:
Name Type Description
actor rekapi.Actor

The rekapi.Actor to apply the new transform order to.
orderedTransforms Array.<string>

The array of transform names. The supported array values (and default order) are:

  • translateX
  • translateY
  • translateZ
  • scale
  • scaleX
  • scaleY
  • perspective
  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • skewX
  • skewY
Returns:
Type:
rekapi.Rekapi

stop(goToEndopt)

Stop a CSS @keyframe animation. This also removes any <style> elements that were dynamically injected into the DOM.

Note that this is not the same as rekapi.Rekapi#stop. That method controls inline style animations, while this method controls CSS @keyframe animations.

Source:
Parameters:
Name Type Attributes Description
goToEnd boolean <optional>

If true, skip to the end of the animation. If false or omitted, set inline styles on the rekapi.Actor elements to keep them in their current position.
Fires: