Count Up#

Animates a number counting up to end, powered by countup.js. By default the animation starts when the element scrolls into view and runs only once.

export const simple = () => html`<owc-count-up end="12345"></owc-count-up>`;

Duration & separator#

duration is the animation time in seconds; separator is the grouping character (defaults to .).

export const durationSeparator = () =>
  html`<owc-count-up end="1234567" duration="2" separator=","></owc-count-up>`;

Advanced options#

Pass any countup.js option through options - explicit options win over the convenience properties. Replace the scroll-spy defaults deliberately when you set your own object.

export const advanced = () =>
  html`<owc-count-up
    end="88.9"
    duration="2"
    .options=${{
      enableScrollSpy: true,
      scrollSpyOnce: true,
      decimalPlaces: 1,
      decimal: ',',
      suffix: ' %',
    }}
  ></owc-count-up>`;

API#

Attributes & properties#

Property	Type	Default	Description
`start`	`number`	`0`	Value the animation starts from.
`end`	`number`	`0`	Value the animation counts up to.
`duration`	`number`	`5`	Animation duration in seconds.
`separator`	`string`	`'.'`	Grouping separator.
`options`	`CountUpOptions`	`{ enableScrollSpy: true, scrollSpyOnce: true }`	Extra countup.js options; win over the convenience properties.

Read-only properties#

Property	Type	Description
`countUp`	`CountUp`	The underlying countup.js instance, e.g. for `countUp.reset()`.