set()

Immediately sets one or multiple properties values to one or multiple targets.

const setter = utils.set(targets, properties);

Parameters

Name	Accepts	Description
targets	Targets	The targeted element(s)
properties	`Object`	An object of valid properties and values of the target

Returns

Animation

utils.set() is useful for setting complex values, but for repeatedly updating the same properties on the same targets, using an Animatable is recommended for better performances.

utils.set() won't work if you try to set an attribute on a DOM or SVG element not already defined on the element.

set() code example

import { utils, stagger } from 'animejs';

const [ $set, $revert ] = utils.$('button');
const squares = utils.$('.square');
const colors = ['red', 'orange', 'yellow'];

let setter;

const setStyles = () => {
  setter = utils.set(squares, {
    borderRadius: '50%',
    y: () => utils.random(-1, 1) + 'rem',
    scale: stagger(.1, { start: .25, ease: 'out' }),
    color: () => `var(--hex-${utils.randomPick(colors)})`
  });
  $set.setAttribute('disabled', 'true');
  $revert.removeAttribute('disabled');
}

const revertStyles = () => {
  setter.revert();
  $set.removeAttribute('disabled');
  $revert.setAttribute('disabled', 'true');
}

$set.addEventListener('click', setStyles);
$revert.addEventListener('click', revertStyles);

<div class="large justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>Set styles</button>
    <button disabled>Revert styles</button>
  </fieldset>
</div>

Previous Next