properties

Extends the list of CSS properties automatically measured and animated during layout transitions.
Position and dimensions are always handled internally. Use this to add custom properties like CSS variables or properties not included in the defaults.

Accepts

Array of CSS property name Strings (including CSS custom properties like '--my-var')

Default

[
  'opacity',
  'fontSize',
  'color',
  'backgroundColor',
  'borderRadius',
  'border',
  'filter',
  'clipPath'
]

properties code example

import { createLayout, utils } from 'animejs';

const [ $button ] = utils.$('.controls button');

const layout = createLayout('.layout-container', {
  duration: 800,
  properties: ['boxShadow']
});

function animateLayout() {
  layout.update(({ root }) => root.classList.toggle('row'));
}

$button.addEventListener('click', animateLayout);

<div class="large layout centered row">
  <div class="layout-container grid-layout row">
    <div class="item col">animate</div>
    <div class="item col">box-shadow</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate</button>
  </fieldset>
</div>

#layout-layout-settings-properties .grid-layout .item {
  color: var(--hex-current-1);
  background-color: var(--hex-current-4);
  box-shadow: inset 0px 0px 6px var(--hex-current-1);
}

#layout-layout-settings-properties .grid-layout.row .item {
  box-shadow: inset 0px 0px 20px var(--hex-current-1);
}

Previous Next