CountUp (and CountDown)

The CountUp module provides CKEditor 5 widgets for CountUp and CountDown.

Features

CountUp

This feature integrates the CountUp.js library with CKeditor, allowing to have nice and configurable animations on pages.

It display a simple animation from the defined start number to the end number, increasing or decreasing the numbers.

CountDown

This feature is adapted from countdown-timer.

It allows to create a count down timer from the defined date to the current date. The alarm setting defines the number of seconds before the end from which the timer starts to pulse.

Requirements

The module requires the following outside of Drupal core:

• CountUp.js library - https://inorganik.github.io/countUp.js/

This library should be installed in the Drupal "libraries" and named countup.js.
The main script should be located here: libraries/countup.js/dist/countUp.umd.js.

Composer

The composer.json file defines the asset-packagist repository.
Simply require this module and the external librairies are also installed:

composer require drupal/countup

Installation

Install the CountUp module as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.

Configuration

1. Navigate to Administration > Extend and enable the module.
2. Navigate to Administration > Configuration > Content Authoring > Text formats and editor > [format text to edit] to configure
3. Drag the Countup and/or CountDown icons into the Active toolbar into the Tools group.
4. Enable the countup filter in the filter list. It should run after the filters which limit the allowed HTML tags.
5. Save configuration.
6. Now when using the CKEditor, select the CountUp ot CountDown icon and edit the animation.

Widgets settings

Widget source code

Available attributes for CountUp:
<countup class start end decimal-places duration use-easing smart-easing-threshold smart-easing-amount use-grouping separator decimal prefix suffix>

Available attributes for CountDown:
<countdown-timer class date date-timezone alarm labels>

Note: the labels attribute is overridden by the text filter, so it should not be used when editing the source.

CKeditor4 (deprecated)

This branch is not compatible with CKeditor5. Work is currently in progress in the 3.x branch.

Branch 8.x-1.x

This branch is deprecated. Please use the 3.x branch.

There is a dependency with the library Scrollama.

Branch 8.x-2.x

This branch is deprecated. Please use the 3.x branch.

The only dependency is the countUp.js library.
There is no backward compatibility with the 8.x-1.x branch. The module has been almost rewritten, and the countUp.js library also changed some setting names.