DOCSEARCHbyAlgolia
Submit Docs

pqina Flip

repository·master·Indexed 21 days ago

https://github.com/pqina/flip

An advanced and flexible flip counter plugin for displaying visitor counts, countdowns, or progress celebrations. Version 1.8.4 supports installation via NPM or CDN and includes a styler interface to configure flip duration and easing functions.

Tokens
1.3K
Snippets
6
Records
6
Agent score
27%

What's inside @pqina/flip

  1. Setup Flip using CDN or local files

    master

    To use Flip without a module bundler, include the CSS in your <head> and the JavaScript before the closing </body> tag. You can host the files locally or use a CDN like unpkg.

    <!-- Using CDN -->
<link href="https://unpkg.com/@pqina/flip/dist/flip.min.css" rel="stylesheet">
<script src="https://unpkg.com/@pqina/flip/dist/flip.min.js"></script>

<!-- Or using local files (ensure paths match your directory structure) -->
<link href="/flip/flip.min.css" rel="stylesheet">
<script src="/flip/flip.min.js"></script>

  2. Install Flip via NPM

    master

    To use Flip as a module in your project, install the @pqina/flip package using npm. This allows you to import the library directly into your JavaScript files.

    npm i @pqina/flip --save

  3. Ensure accessibility for screen readers

    master

    To make Flip counters accessible, you should hide the visual flip animation from screen readers using aria-hidden="true" and provide a text-based description using the aria-label attribute on the root element. This prevents screen readers from attempting to read the individual animated elements and instead reads the formatted value.

    <div class="tick"
     data-value="1234"
     data-did-init="setupFlip">
  
    <!-- Hide visual content from screenreaders with `aria-hidden` -->
    <div data-repeat="true" aria-hidden="true">
        <span data-view="flip"></span>
    </div>
  
</div>

<script>
function setupFlip(tick) {
    // Example: Incrementing the value every second
    Tick.helper.interval(function() {
        tick.value++;

        // Set `aria-label` attribute which screenreaders will read instead of HTML content
        tick.root.setAttribute('aria-label', tick.value);
    }, 1000);
}
</script>

  4. Import Flip as a module

    master

    Once installed via NPM, you can import the library. The imported object (referred to as Tick in the example) contains the core functionality, including supported, options, helper, data, and DOM properties.

    import Tick from '@pqina/flip';

console.log(Tick);
// logs {supported: true, options: {…}, helper: {…}, data: {…}, DOM: {…}, …}

  5. Configure Flip animation styles

    master

    The Flip instance provides a styler interface to configure the visual behavior of the flip animation. You can control the duration of the flip and the easing function used during the transition.

    Default configuration:

    • flipDuration: 800 (milliseconds)
    • flipEasing: 'ease-out-bounce'

    Note that flipEasing expects a registered easing function name from the Extension system.

    // Example of setting styles via the returned object
counter.setStyle({
    flipDuration: 1000,
    flipEasing: 'ease-out-cubic'
});

  6. Initialize the Flip plugin

    master

    The Flip plugin is initialized by calling the default exported function with a dependency injection object. This object must provide several core utilities: DOM, Animation, Extension, Date, and View.

    Once initialized, the function returns an object that allows you to control a specific DOM element as a flip counter. The returned object includes methods for updating the value, styling the animation, and managing the lifecycle of the component.

    // The plugin is a factory function that requires a dependency object
const Flip = require('@pqina/flip'); // Example import

const flipInstance = Flip({
    DOM,
    Animation: { animate },
    Extension,
    Date: { performance },
    View: { rooter, destroyer, drawer, updater, styler }
});

// Usage on a specific root element
const counter = flipInstance(document.querySelector('#my-counter'));