Flip not showing

[adamo]

Hi. I've installed Flip via npm. included it

import Tick from '@pqina/flip';
console.log(Tick);

And placed in my project using one of the examples

<div class="tick" data-did-init="handleTickInit">
    <div data-repeat="true" data-layout="horizontal fit" data-transform="preset(d, h, m, s) -> delay">
        <div class="tick-group">
            <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                <span data-view="flip"></span>
            </div>
            <span data-key="label" data-view="text" class="tick-label"></span>
        </div>
    </div>
</div>
<script>
    function handleTickInit(tick) {
        let locale = {
            YEAR_PLURAL: 'Lat',
            YEAR_SINGULAR: 'Rok',
            MONTH_PLURAL: 'Miesięcy',
            MONTH_SINGULAR: 'Miesiąc',
            WEEK_PLURAL: 'Tygodni',
            WEEK_SINGULAR: 'Tydzień',
            DAY_PLURAL: 'Dni',
            DAY_SINGULAR: 'Dzień',
            HOUR_PLURAL: 'Godzin',
            HOUR_SINGULAR: 'Godzina',
            MINUTE_PLURAL: 'Minut',
            MINUTE_SINGULAR: 'Minuta',
            SECOND_PLURAL: 'Sekund',
            SECOND_SINGULAR: 'Sekunda',
            MILLISECOND_PLURAL: 'Milisekund',
            MILLISECOND_SINGULAR: 'Milisekunda'
        };

        for (var key in locale) {
            if (!locale.hasOwnProperty(key)) { continue; }
            tick.setConstant(key, locale[key]);
        }

        var counter = Tick.count.down('2021-01-01T00:00:00+01:00');

        counter.onupdate = function(value) {
          tick.value = value;
        };

        counter.onended = function() {
            // redirect, uncomment the next line
            // window.location = 'my-location.html'

            // hide counter, uncomment the next line
            // tick.root.style.display = 'none';

            // show message, uncomment the next line
            // document.querySelector('.tick-onended-message').style.display = '';
        };
    }
</script>

But nothing is shown. In the console I've got confirmation that its included.

{
    "supported": true,
    "options": {},
    "helper": {},
    "data": {},
    "DOM": {},
    "count": {},
    "plugin": {}
}

What can be the problem? Am I missing something? In the console the're no issues or errors.

I'm using parcel bundler if that's any help.

[rikschennink]

Have you included the CSS files?

[adamo]

Yes, when inspecting the code it shows only this

<div class="tick" data-did-init="handleTickInit">
    <div data-repeat="true" data-layout="horizontal fit" data-transform="preset(d, h, m, s) -> delay">
        <div class="tick-group">
            <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                <span data-view="flip"></span>
            </div>
            <span data-key="label" data-view="text" class="tick-label"></span>
        </div>
    </div>
</div>

[rikschennink]

Please create a public test case on codesandbox.io

[rikschennink]

Closed because inactive