`auto:update`

Re-render the doodle on a fixed interval.

Syntax

<css-doodle auto:update></css-doodle>
<css-doodle auto:update="<interval>"></css-doodle>

interval: A duration in ms, s or m. A bare number is milliseconds. Default 2000, minimum 500.

A manual update() or a click:update restarts the timer. Removing the attribute stops it. An interval set with autoUpdate() takes precedence over the attribute value until cancelAutoUpdate(). Ticks are skipped while the user prefers reduced motion, unless the doodle has ignore-reduced-motion.

Examples

<css-doodle click:update auto:update="2s">
  @grid: 5 / 60vmin;
  @size: 19%;
  @content: @i;
  background: #000;
  color: #fff;
  transition: @r(1s);
  @place: @pd.m5x5(
    @nx(*20%, -10%) @ny(*20%, -10%)
  );
  rotate: @p(0, 90deg, 180deg, 270deg);
</css-doodle>

@grid: 5 / 60vmin; @size: 19%; @content: @i; background: #000; color: #fff; transition: @r(1s); @place: @pd.m5x5( @nx(*20%, -10%) @ny(*20%, -10%) ); rotate: @p(0, 90deg, 180deg, 270deg);

The same thing from JavaScript:

const doodle = document.querySelector('css-doodle');
doodle.autoUpdate('2s');
doodle.cancelAutoUpdate();

See also