Flipify

Flipify is a TypeScript library for declarative Flip animations.

Features

• Declarative Trigger-Based Animations

  Flipify allows for concise and clear implementation of Flip animations declaratively. Users can create animations with a single trigger function.

• Strong Type Safety with TypeScript

  Flipify offers detailed and intuitive type definitions, making it reliable and predictable.

• Flexible Style Customization

  Flipify enables detailed control over style properties to meet diverse requirements while remaining easy to use with default values.

• Responsive Design Support

  Flipify works seamlessly across various screen sizes.

Installation

npm install @flipify/core

pnpm add @flipify/core

yarn add @flipify/core

Usages

JavaScript

<div id="flip-container"></div>

import { initialize } from '@flipify/core';

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('div.flip-container');

  console.log(container);

  container.style.width = '100vw';
  container.style.height = '100vh';

  let currentNumber = 97;
  const { trigger } = initialize(container, currentNumber, { useDigit: true });

  const interval = setInterval(() => {
    currentNumber += 1;

    if (trigger) {
      trigger(currentNumber);
    }
  }, 1000);

  window.addEventListener('unload', () => {
    clearInterval(interval);
  });
});

React

import { initialize } from '@flipify/core';
import React, { useEffect, useRef, useState } from 'react';

export const Flip: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<((value: number) => void) | null>(null);
  const [currentNumber, setCurrentNumber] = useState(0);

  useEffect(() => {
    const container = containerRef.current;

    if (!container) return;

    const { trigger } = initialize(container, currentNumber, { useDigit: true });

    triggerRef.current = trigger;
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentNumber((prev) => prev + 1);

      if (triggerRef.current) {
        triggerRef.current(currentNumber);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [currentNumber]);

  return <div ref={containerRef} style={{ height: '50vh' }} />;
};

Options

| Option | Type | Description | Default | Remarks | | ---------------------------------- | ------------ | ------------------------------- | ----------- | ----------------------------------------------------------- | | useDigit | boolean | Toggle digit change | false | true, false | | animation.duration | TDuration | Animation duration | 500 | In ms, e.g., 1000, 500 | | style.card.width | TDimension | Width of the card | 300px | Can also use number, e.g., 100px, 20%, 10rem, 100 | | style.card.height | TDimension | Height of the card | 400px | Can also use number, e.g., 200px, 20%, 10rem, 200 | | style.card.fontSize | TDimension | Font size of the card | 200px | Can also use number, e.g., 20px, 3rem, 18 | | style.card.borderRadius | TDimension | Border radius of card | 10px | Can also use number, e.g., 10px, 50%, 5 | | style.centerLine.height | TDimension | Height of the center line | 10px | Can also use number, e.g., 2px, 1rem, 5 | | style.centerLine.backgroundColor | TColor | Background color of center line | #DDDDDD50 | E.g., #000000, rgba(0, 0, 0, 0.2) | | style.number.color | TColor | Color of the number | #FFFFFF | E.g., white, #ff5722, rgb(0, 0, 0) | | style.number.backgroundColor | TColor | Background color of number | #000000 | E.g., black, #eeeeee, rgb(255, 255, 255) |

Licenses

MIT License

Copyright (c) 2024 HyoungMin.