get()

Returns the current value of a target's property, with optional unit conversion or removal.

const value = utils.get(target, property, unit);

Parameters

Name	Accepts	Description
target	Targets	The targeted element
property	`String`	A valid property name of the target
unit ^(opt)	`String` \| `Boolean`	Strip the unit if set to `false` or convert the unit if a valid unit `String` is passed

Returns

The returned property value type or the following types if the conditions are met:

Type	Condition
`String`	The target is an `HTMLElement` or `SVGElement` and the `unit` parameter is not set to `false` or set to a valid unit `String`
`Number`	The target is an `HTMLElement` or `SVGElement` and the `unit` parameter set to `false`

get() code example

import { animate, utils } from 'animejs';

const [ $raw, $rem, $num ] = utils.$('.value');
const [ $sq1, $sq2, $sq3 ] = utils.$('.square');


const getValues = () => {
  // Return the raw parsed value (string with px)
  $raw.textContent = utils.get($sq1, 'x');
  // Return the converted value with unit (string with rem)
  $rem.textContent = utils.get($sq2, 'x', 'rem');
  // Return the raw value with its unit removed (number)
  $num.textContent = utils.get($sq3, 'x', false);
}

animate('.square', {
  x: 270,
  loop: true,
  alternate: true,
  onUpdate: getValues
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="raw value"></span></div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="rem value"></span></div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label"><span class="num value"></span></div>
</div>

Previous Next

$()
set()