If I removed the "Powered by PQINA" credits from my website, will that count as going against your term of use.

I tried to integrate your component into our web application and I encountered two bugs while testing. I managed to fix them and I provide fixes below. Line numbers are related to https://github.com/pqina/flip/blob/master/dist/flip.js

Bugs and fixes:

1. When started minimized timer wouldn't start. I discovered there's a problem with sleepIntervalOffset being null and this happens because of code on line #4155 (if(isDocumentHidden()...) which should really be executed after line #4161, so after calculating tickExpectedTime. Fixed lines:
   #4154... 4161:
   // the moment the timeout should end
   tickExpectedTime = now$2() + interval;

    // stop here if document is hidden at start time
    if (isDocumentHidden()) {
    	didHideDocument();
    	return;
    }
   

2. 1px offset when drawing, style == flip. I discovered it's related to css transform being rotateX(-360) - see line #658. Fix is easy: there's no 1px offset if you set degrees to 0 instead of -360 and you also add translateZ and scale so the fixed two lines are as follows:
   #657: this._front.style.transform = 'rotateX(' + degrees + 'deg) translateZ(0) scale(1.0, 1.0)';
   #658: this._back.style.transform = 'rotateX(' + (-180 + degrees) == -360 ? 0 : (-180 + degrees) + 'deg) translateZ(0) scale(1.0, 1.0)';

I'm always getting this error even with the example index.html, when it is hosted on a web server But in localhost it works as expected.

Uncaught Can't get extension with name "elay", "elay" is not available. The following extensions are available: "ascii", "char", "tween", "value", "input", "rotate", "map", "transform", "upper", "lower", "abs", "add", "subtract", "modulus", "pad", "number", "replace", "round", "ceil", "floor", "fraction", "percentage", "multiply", "divide", "split", "format", "plural", "limit", "reverse", "arrive", "spring", "delay", "step", "keys", "duration", "substring", "preset"

I am trying to implement this library in my Framework7 project (with pure Javascript) and I'm having some problems. I would like to know if you can help me.

I want to create, a kind of Pomodoro, like this (https://codepen.io/putraaryotama/pen/wgwqBB) but with @pqina/flip.

In this Sandbox you can see how far I have advanced: https://codesandbox.io/s/loving-feather-hmcx6

The points that I am not achieving are the following:

1. "autostart" to false: when I instantiate the count.down that does not start automatically
2. Colon ":" between minutes and seconds
3. Update the value of count.down and the view when doing "reset" with the value entered in the stepper (variable "tickTimeSelected") and when the stepper value change with Contdown stopped.

The whole implementation is in the file "src/pages/home.f7.html".

I have read the complete documentation (https://pqina.nl/tick/) and tried many alternatives but I cannot unlock those points, I would appreciate if you can help me.

Thank you, Fabricio

Hi @rikschennink ! Tried to adapt your code to include days. Your code:

            Tick.count.down('2021-11-26T00:01:00', { format: ['h','m','s'] }).onupdate = function (value) {
                var d = Tick.helper.date();
                tick.value = {
                    hours: d.getHours(),
                    minutes: d.getMinutes(),
                    seconds: d.getSeconds()
                };
            };

my code:

            Tick.count.down('2021-11-26T00:01:00', { format: ['d','h','m','s'] }).onupdate = function (value) {
                var d = Tick.helper.date();
                tick.value = {
                    days: d.getDays(),
                    hours: d.getHours(),
                    minutes: d.getMinutes(),
                    seconds: d.getSeconds()
                };
            };

but then i get Uncaught TypeError: d.getDays is not a function. why does it not work?

Hi !
I need to create 5 value counters with differents values and intervals on a same page. I can't find on flip documentation how to do it.
Is it possible to add data on html and use only one function ?
I'm trying to work with this one :

function handleTickInit(tick) {

                            // update the value every 5 seconds
                            var interval = Tick.helper.duration(5, 'seconds');

                            // value to add each interval
                            var valuePerInterval = 1;

                            // offset is a fixed date in the past
                            var dateOffset = Tick.helper.date('2021-04-19');

                            // value to start with, the value of the counter at the offset date
                            var valueOffset = 17143;

                            // uncomment lines below (and comment line above) if you want offset be set to the first time the user visited the page
                            // var offset = parseInt(localStorage.getItem('tick-value-counter-offset') || Date.now(), 10);
                            // localStorage.setItem('tick-value-counter-offset', offset);

                            // start updating the counter each second
                            Tick.helper.interval(function () {

                                // current time in milliseconds
                                var now = Date.now();

                                // difference with offset time in milliseconds
                                var diff = now - dateOffset;

                                // total time since offset divide by interval gives us the amount of loops since offset
                                var loops = diff / interval;

                                // this will make sure we only count completed loops.
                                loops = Math.floor(loops);

                                // multiply that by the value per interval and you have your final value
                                tick.value = valueOffset + (loops * valuePerInterval);

                            }, 1000);
                        }

Thanks in advance

Hi,

How can I change the color and background color dynamically?

I try using jquery but it's not working.

  $('#colorpicker').change(function() {
        var val = $(this).val();
        $('.tick-flip-panel').css('background-color', val);
    });

Hi, first of all, congratulations for the great library.
It's the best flip card I've found! It works really amazing.

I'm wondering how can I use it imperatively? So if I have a div where I want to render the flip, how I can add it to this div having only the div reference?

My idea is to integrate in a side project I'm building in ReactJS.
If you have any idea.

I am trying to rebuild this recurring event demo (https://pqina.nl/flip/#nutshell) using JavaScript since I need to output the same countdown on multiple places on a single page.

I've got it close, but am having trouble trying to figure out how to recreate the .tick-group div using JavaScript/Presenters. Any chance you could point me in the right direction here?

// Flip.js
// https://pqina.nl/flip/

var elements = document.querySelectorAll('.countdown')
if (elements.length > 0) {
    elements.forEach(element => {
        var tick = Tick.DOM.create(element, {
            view: {
                children:[
                    {
                        root: 'div',
                        transform: 'preset(d, h, m, s) -> delay',
                        key: 'value',
                        children: [
                            {
                                view: 'flip'
                            }
                        ],
                        layout: 'horizontal fill',
                        repeat: true
                    }
                ]
            },
            didInit: function(tick) {
                Tick.count.schedule('every day at 0').onupdate = function(value) {
                    tick.value = value
                }
            }
        })
    })
}

// END Flip.js

Hi,

using this create plugin as a clock in my smart home dashboard

While the auto-resize horizontally (width) works quite fine, it doesn't in the height. Thus, it overlaps if there is not enough space (see image).

Is there any chance to get that implemented as well?

Thanks
Siedi

Hi!
Thanks for such a great flip counter plugin!

Is there a way to implement another language?
I need "weeks" , "days", "minutes", "seconds" in other languages also, depending on website language..

Trying to get this example working https://pqina.nl/flip/preset-animated-values.html

As soon as I add the data-transform, I get the following js error t.shift is not a function
If the data-transform is omitted, the flip counter shows as expected

Tried using both the dist and the CDN versions (for context, trying to get this on a wordpress site).

Returning a timestamp 1659265959 on page load then working fine
So, it is breaking on page load then working
so need to assign a value to data-value after page completely load
how can i do ?
Thanks

In minifier CSS and JS a version is 1.7.5...

Tnx a lot

I've seen the other Issue from React, but i prefer to use it as an npm-module directly inside a component and not globally, it's possible?

I tried using this module with NextJs but facing an error

SyntaxError: Cannot use import statement outside a module

/node_modules/@pqina/flip/dist/flip.module.js:1
import Tick from '../tick/tick.core.module';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.@pqina/flip (/Users/vivek/Documents/Singularity/snet-airdrop/.next/server/pages/index.js:449:18)
    at __webpack_require__ (/Users/vivek/Documents/Singularity/snet-airdrop/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./snet-ui/FlipClock.tsx/Flip.tsx:7:69) {
  page: '/'
}

Hi,

Flip is absolutely awesome. It is super simple to setup a count down timer.

My challenge is that we are heavily utilizing JQuery and it isn't obvious how to have the "data-did-init" invoke a JQuery method to do a countdown OR how to wire up the method from JQuery (I would expect this is the approach needed).

Say I have the following HTML:

          <div id="preview-countdown" class="tick">
            <div data-repeat="true" data-layout="horizontal center 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>

How would I be able to from JQuery attach my own "handleTickInit" method?

I suspect the solution involves using the find method and have tried the following but it complains that "Uncaught TypeError: Cannot read properties of undefined (reading 'count')"

      $('#preview-countdown').tick.count.down(new Date(previewMode), {
       format: ['d', 'h', 'm', 's'],
       interval: 1000
       }).onupdate = function(value) {
            $.tick.value = value;
       };

What is strange is that I see the tick is initialized by the fact that the data-state says so but just don't know how to attach the method to handle the tick object. Ultimately, I assume it is super simple and others might benefit from docs updated to include this manner to access this great counter.

My Code is simple:

       function handleTickInit(tick) {
            var opt = { format: ['y', 'M', 'd', 'h', 'm', 's'] };
            var ticker = null;
            ticker = Tick.count.down('2021-03-30', opt);
            ticker.onupdate = function (value) {
                tick.value = value;
            }
        }

<div class="tick" data-did-init="handleTickInit">
            <div data-repeat="true" data-layout="horizontal fit" data-transform="preset(y, M, 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>

Count is stuck and nothing heppens:

When I change date to be different than 30th of month it runs. Also it runs when I remove "M" from preset and format. Strange...

Hi,

How can I change the color and background color dynamically?

I try using jquery but it's not working.

  $('#colorpicker').change(function() {
        var val = $(this).val();
        $('.tick-flip-panel').css('background-color', val);
    });

Your countdown timer is by far the best :) Congratulations

How would you wrap this in a vue component?

calling Tick.DOM.destroy(ref.current);when cleaning up a React component can sometimes throw the following error:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The issue can be reproduced here by clicking the 'toggle' button: https://codesandbox.io/s/react-flip-demo-z715o?file=/src/App.js

Maybe flip could expose a second cleanup method (that only removes listeners) that doesn't also try to modify the dom, so React (or Vue) can call it safely?

tick.core.module.js

var destroyer = (function (state) {
  return {
    destroy: function destroy() {
 
      if (state.root && state.root.parentNode) {
        // This will crash React
        // state.root.parentNode.removeChild(state.root);
      }
    }
  };
});

Could you explain why flip freezes when I leave the page and how to fix it?
As for example you can check your demos on https://pqina.nl/flip/#nutshell
the counters will stop when you switch to another tab and will continue when return back.

I'm having a little trouble bringing the code from the codesandbox, https://codesandbox.io/s/gifted-newton-xhtfk created from issue #6, into my nuxt project. I'm getting the error of "Unexpected token import" on line 10 "import Tick from "@pqina/flip";" in ./components/Flip.vue.

I created a brand new create-nuxt-app repo for debugging purposes, https://github.com/jaymefrantz/nuxt-flip-example.

Any pushes in the right direction would be greatly appreciated.

I am not able to find documentation for transform component preset, which is used eg. in flip example flip-master/example/index.html. There are many methods in the docs on https://pqina.nl/tick/#value-transforms, but this one is missing.

Hello, I came across this plugin in a recent front-end newsletter and I decided to give it a try. First of all, thank you so much, the look is great and it does a lot of stuff! However I implemented it today and I need some assistance with some things. I took the "Event Countdown" example.

URL: http://theintegrateur.com/clients/css/visite-virtuelle.html

• On load, why does the countdown grow from small to original size? (It does that on every browser)
• How come on resize it's not responsive? (It works if I refresh the page though)
• Is there a way to put a "font-size" on .tick-label so that it doesn't go too far down from .tick-group > div

Thanks! :)

May I pay you a beer or coffee?

Hi, I want to know how to adjust number position in card.
I see "leading" property in demo page, but I can't find any related keyword or how to use in documentation

Hi,

I am trying to display a rather complex timer schedule that basically consists of several from .. till .. every xx minutes. It seems that no matter what I pass as argument to count.schedule, nothing is rendered. Instead, I get

<div class="tick" data-did-init="handleTickInit" data-state="initialised">

    <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(h, m, s) -> delay">

        
    </div>

</div>

in the DOM and Tick fails silently.

My actual code in handleTickInit function look like this:

Tick.count.schedule(
    'every day at 18:30, from 1:20 till 2:50 every 30 minutes, from 8:30 till 10:20 every 25 minutes, from 12:20 till 14:20 every 30 minutes, from 21 till 22:15 every 25 minutes', {format:['h', 'm', 's']}
    ).onupdate = function(value) {
  tick.value = value;
};

Removing all from .. till .. every .. minutes makes Tick work as expected.

BTW. Really looking forward to using count.schedule as it seems to be a perfect fit for my needs. Thanks for your time!

I have a countdown running in my App and I need to send alerts at certain times regardless of whether the App is in foreground or in background.

In foreground the "onupdate" event fires correctly but in background it does not.

Here is an example of my implementation in Framework7 App and I attach an screen where it is evident that the "onupdate" is not fired when I move to background.

In the documentation I have not found a way to avoid this "sleep" of the timer. Could you give me any implementation or workaround suggestions?

Thanks in advance

Optionally hiding the Flip component in react with ternary operator causes a "NotFoundError: Node.removeChild: The node to be removed is not a child of this node".
This is because of the Tick.DOM.destroy(this._tickRef.current); in componentWillUnmount() .

Is there any workaround for this? I like the way this flip counter looks a lot and I'd hate to have to replace is by something else just to fix this.

Hi,

I am using the flip with a large number 5399 but although I have set the

<div data-layout="horizontal right" data-repeat="true" data-transform="arrive(9, .005) -> round -> pad(' ') -> split -> delay(rtl, 10, 50)"> <span data-view="flip"></span> </div>

I am looking to ensure the flip is completed within 5 seconds.

Any help is appreciated.

The 1st example on https://pqina.nl/flip/ (Event Countdown) is not working when I add transform

I get the following error:

TypeError: value.map is not a function

Without it, it works perfectly fine.

Here's a codesandbox demo: https://codesandbox.io/s/flip-transform-not-working-bqmwg?file=/src/EventCountdown.js

Here's the code for brevity:

App.js

import React from "react";
import "./styles.css";
import { EventCountdown } from "./EventCountdown";

export default function App() {
  return (
    <div className="App">
      <h1>Flip not working with transform</h1>
      <EventCountdown value="2021" />
    </div>
  );
}

EventCountdown.js

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";

export const EventCountdown = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value, {
      format: ["y", "M", "d", "h", "m", "s"]
    });

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    return () => {
      counter.timer.stop();
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div ref={divRef} className="tick">
      <div
        data-repeat="true"
        data-layout="horizontal fit"
        data-transform="preset(d, h, m, s) -> delay"
      >
        <div className="tick-group">
          <div
            data-key="value"
            data-repeat="true"
            data-transform="pad(00) -> split -> delay"
          >
            <span data-view="flip" />
          </div>

          <span data-key="label" data-view="text" className="tick-label" />
        </div>
      </div>
    </div>
  );
};

Working examples with React can be found here: https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file=/src/App.js

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.

Hey guys, I tried to use @pqina/flip library but just won't work I copied the component code in here codesandbox vue flip but I get this error

package.json

my component

Hello there,

I am wanting to achieve an evergreen countdown timer that repeats itself every 2 days or 48 hours with tick.count.schedule()

I have tried both:

• Tick.count.schedule('every 48 hours at 23:59:59')
• Tick.count.schedule('every 2 days at 23:59:59')

But I don't think that the logical English syntax is supported.

How can I achieve this?

If I pass 2020-06-10T00:00:00+01:00 as the time, the first time it shows the whole thing for 1 second at least which feels janky. Try reloading the codesandbox to see the effect :)

Would love to know a way to suppress that?

Code & Sandbox is the same as issue #10

Hi, I am getting

in production mode, while it works nicely in development.
Any idea pretty please?

import React, { useRef, useEffect } from "react";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";
import './custom.scss';

export const Flip = ({ value, cssClasses }) => {
  const divRef = useRef();
  const tickRef = useRef();

  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;

    Tick.DOM.create(currDiv, { value, didInit });

    return () => Tick.DOM.destroy(tickValue);
  });

  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = value;
    }
  }, [value]);

  const getTickClasses = () => {
    const classes = ['tick'];

    if (cssClasses) {
      classes.push(cssClasses);
    }

    return classes.join(' ');
  };

  return (
    <div ref={divRef} className={getTickClasses}>
      <div data-repeat="true">
        <span data-view="flip">Tick</span>
      </div>
    </div>
  );
};

<Flip cssClasses={this.getFlipClasses()} value={count} />

# package.json
"@pqina/flip": "^1.7.5",

Hi, A great Thanks for your amazing contribution to make the flip package available as an npm module.
I have tried to import it to display a simple flip timer (that should display time form 00:00 sec until an event (function) get fired. I want to stop the watch when the function is called.

Can you please show an example to show the timer in a React functional component using hooks?

Hi,
Is there any possibility to pause, resume and reset a countdown from Tick.count.down method?
Thanks!

flip demo:

https://codesandbox.io/s/vue-flip-demo-xhtfk

add data-style="flip-duration:500ms" to <span data-view="flip"></span>

result:
<span data-view="flip" data-style="flip-duration:500ms"></span>

then the flipping effects not working, pls

When a single digit number is shown then it is written as 7 instead of 07 even though in transform, there is a pad(00). Maybe the , is shown instead of 0 idk?

Same codesandbox demonstrating what I am talking about: https://codesandbox.io/s/flip-padding-not-working-bqmwg?file=/src/EventCountdown.js

Here's the code for brevity:

App.js

import React from "react";
import "@pqina/flip/dist/flip.min.css";
import { EventCountdown } from "./EventCountdown";

export default function App() {
  return (
    <div>
      <h1>Flip padding not working</h1>
      <h1>
        <EventCountdown value="2021-01-01T00:00:00+01:00" />
      </h1>
    </div>
  );
}

EventCountdown.js

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";

export const EventCountdown = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value);

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    return () => {
      counter.timer.stop();
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div className="tick">
      <div
        data-repeat="true"
        data-layout="horizontal fit"
        data-transform="preset(d, h, m, s) -> delay"
      >
        <div className="tick-group">
          <div
            ref={divRef}
            data-repeat="true"
            data-transform="pad(00) -> split -> delay"
          >
            <span data-view="flip" />
          </div>

          <span data-key="label" data-view="text" className="tick-label" />
        </div>
      </div>
    </div>
  );
};

I am unable to figure how to set days, hours, minutes & seconds in the counter.

I tried every transform but either it makes the counter stop or it places days, hours at awkward places like before or after the comma.

Currently I see 9,13,59,20 but what I want is 9 days, 13 hours, 59 minutes & 20 seconds where the numbers flip & the text remains static :)

Would love to know the answer to this as well?

Code & Sandbox is the same as issue #10

The code I am using is:

		var tick = Tick.DOM.create({
		value: "Asdfg",
		view:
		// definition for top level tick element
		{	
			children:[
            // presenter object
            {
                root: 'div',
				repeat: true,
                layout: 'horizontal fit',
				transform: 'upper -> split -> delay(random, 100, 150)',
                children: [
                    // presenter object
                    {
                        view: 'flip',
						transform: 'ascii -> arrive -> round -> char(a-zA-Z)'
                    }
                ]
            }
			]	
		}
		});

		window.document.body.appendChild(tick.root);

Not sure if I'm doing something wrong, but sometimes the counter displays the incorrect value. (I'm essentially using the slow reveal code from https://pqina.nl/flip/ (slow reveal).

Here is my code:

https://codepen.io/julianthompson/pen/poVOwdW

You'll need to refresh a few times to get the wrong value. Its usually one digit out. I got two wrong values in 10 refreshes. Counter 1 should be 631 and it displayed 231.

How can I use this npm module to make a count down timer in a react function component?
I am working on an online test project, and want to display the rest time left of the exam with the help of the flip clock. How to use this?

I'm attempting to create an initial flipper value of "???". Then on a specific event, I'd like to flip the counter over to zeros, and count upwards to a specific 3-digit (or less) number.

I'm using the following for the numeric counting: data-transform="arrive(9, .001) -> round -> pad('???') -> split -> delay(rtl, 100, 150)" (adapted from the "Animated Values" example).

I've tried playing around with the documentation here and messed with variations on data-transform="transform(split() -> map(replace('?', '0'))) -> arrive(9, .001) -> round -> pad('000') -> split -> delay(rtl, 100, 150)", but it either didn't achieve what I wanted or threw errors.

Happy to provide more context if needed. Ideally, the flipper would function like this:

1. Initialize with "[?] [?] [?]" (each bracket being it's own flipper)
2. On specific trigger, each "[?]" flips over to "[0]".
3. Then counts up to whatever the specific number is.

Thanks!

Hi there,

Love the component and would love to use it in my application, but I am unsure how to port it over to Angular.
I don't suppose you have any knowledge how to make this available in an AngularJS application?

Hey I have a problem when installing the package in my projet.

...\node_modules@pqina\flip\dist\flip.module.js:1
import Tick from '@pqina/flip/tick/tick.core.module';
^^^^^^
SyntaxError: Cannot use import statement outside a module

I can't put 'type:'module' ,in my package.json or i have another error.

I'm using ES6

My dependecies :
"@babel/core": "^7.12.3",
"react": "16.13.1",

Whats the best way to style tick-flip-panel in React.js ?
I saw that its possible to pass in a view to Tick.DOM.create but couldnt find any examples of it.
Im specifically looking at ways to dynamically change the color of tick-flip-panel

Hi~
I tried using the Flip in nuxt3.
Cannot read properties of null (reading 'plugin')
Can it be compatible in SSR?

I found both flip.min.js and flip.min.css on JSDeliver. I think it is possible to add the CDN installation to the README file.

https://www.jsdelivr.com/package/npm/@pqina/flip?path=dist&tab=collection