react-animate-z 1.1.0 → 2.0.0

package/README.md

@@ -1,220 +1,376 @@
+# 📦 react-animate-z
+
 <div align="center">
-    <h1>react-animate-z</h1>
-    <a href="https://www.npmjs.com/package/react-animate-z">react-animate-z</a>
-    <br />
-    <br />
-    <b><a href="https://codesandbox.io/p/sandbox/twpj8l">LIVE EXAMPLE</a></b>
+  <b>✨ Simple React animation components built with styled-components</b>.
+  <br />
+  <br />
+  <a href="https://www.npmjs.com/package/react-animate-z">react-animate-z</a>
+  <br />
+  <br />
+  <b><a href="https://codesandbox.io/p/devbox/lively-night-lrjs4s">LIVE EXAMPLE</a></b>
 </div>
 
-
 <br />
 
 [![NPM](https://img.shields.io/npm/v/react-animate-z.svg)](https://www.npmjs.com/package/react-animate-z)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 ![Downloads](https://img.shields.io/npm/dt/react-animate-z.svg)
 
+A React + styled-components based animation library with more than
+**180+ pre-built animations**.
 
----
-React Component to show animated text and objects, built with [styled-components](https://www.styled-components.com/).
+## 🚀 Features
 
-The Component provides regular animation for common object and some animation effects especially for typography like letters and multi-line text.
+✅ Easy-to-use animation wrapper for any element
 
-WrapBlock: div (default)
+✅ Fully typed with TypeScript
 
-## Installation
+✅ Customizable duration, delay, iteration, timing, direction, fillMode
 
-Install via npm:
+✅ Typewriter-style text animation with blinking cursor
 
-```
-npm i react-animate-z
-```
+## 🚀 Installation
 
- ## Usage
+```bash
+npm install react-animate-z
 
-To use react-animate-z in your react project,
-wrap the content with a `Animate` component and customize the animation with relevant properties.
+# or
 
-```js
-import Animate from 'react-animate-z'
+yarn add react-animate-z
+```
+
+## 🎬 Usage
+
+```tsx
+import React from "react";
+import Animate from "react-animate-z";
 
-const Animate = () => {
+export default function App() {
   return (
-    <Animate
-      type="blur"
-      duration="1000ms"
-      delay="0s"
-      direction="normal"
-      timing="ease"
-      iteration="infinite"
-      fillMode="none">
-      Content...
+    <Animate type="bounce" duration="1s">
+      <h1>Hello Animation</h1>
     </Animate>
-  )
+  );
 }
 ```
 
-### Available properties
-
-|  Property   | Corresponding Animation Property |     Data Type     | Default  Value | Property Unit |
-| :---------: | :------------------------------: | :---------------: | :------------: | :-----------: |
-|   `type`    |         `animation-name`         |     `String`      |     "blur"     |       -       |
-| `duration`  |       `animation-duration`       |     `String`      |      "1s"      |  `s` or `ms`  |
-|   `delay`   |        `animation-delay`         |     `String`      |      "0s"      |  `s` or `ms`  |
-| `direction` |      `animation-direction`       |     `String`      |  "alternate"   |       -       |
-|  `timing`   |   `animation-timing-function`    |     `String`      |     "ease"     |       -       |
-| `iteration` |   `animation-iteration-count`    | `Number` `String` |   "infinite"   |       -       |
-| `fillMode`  |      `animation-fill-mode`       |     `String`      |     "none"     |       -       |
-
-##### Props
-| `type` / Animation name |
-| ----------------------- |
-| `blur`                  |
-| `fadeIn`                |
-| `fadeOut`               |
-| `hang`                  |
-| `hangOnLeft`            |
-| `hangOnRight`           |
-| `swing`                 |
-| `glowing`               |
-| `shakeMix`              |
-| `shakeHorizontal`       |
-| `shakeVertical`         |
-| `spin`                  |
-| `bounce`                |
-| `flipCenterToRight`     |
-| `flipFromLeftToCenter`  |
-| `flash`                 |
-| `pulse`                 |
-| `jelly`                 |
-| `squeezeHorizontal`     |
-| `squeezeVertical`       |
-| `flipHorizontal`        |
-| `flipVertical`          |
+## 🔧 Props
+
+Prop Type Default Description
+
+| Prop        | Type                   | Default      | Description                                                                              |
+| ----------- | ---------------------- | ------------ | ---------------------------------------------------------------------------------------- |
+| `type`      | `AnimateType`          | `'blurIn'`   | Animation name (ví dụ: `'blurIn'`, `'bounce'`, `'fadeOut'`, ...)                         |
+| `duration`  | `string \| number`     | `'1s'`       | Duration of the animation (can be in seconds `'1s'` or milliseconds `1000`)              |
+| `timing`    | `TimingKey`            | `'ease'`     | Timing function (e.g., `'ease'`, `'linear'`, `'ease-in'`, `'ease-out'`)                  |
+| `delay`     | `string \| number`     | `'0s'`       | Delay before the animation starts                                                        |
+| `iteration` | `number \| "infinite"` | `1`          | Repeat count of the animation                                                            |
+| `direction` | `string`               | `'normal'`   | Animation direction (`'normal'`, `'alternate'`, `'reverse'`, etc.)                       |
+| `fillMode`  | `string`               | `'forwards'` | How styles are applied after animation (`'forwards'`, `'backwards'`, `'both'`, `'none'`) |
+| `tagName`   | `string`               | `'div'`      | Custom HTML tag to render                                                                |
 
 ---
 
-##### type
-```js
-// props: type
-"blur"
-"bounce"
-"effect3D"
-"flash"
-"float"
-"glowing"
-"jelly"
-"pulse"
-"shadow"
-"spin"
-"swing"
-"fadeIn"
-"fadeInFromLeft"
-"fadeInFromRight"
-"fadeInFromTop"
-"fadeInFromBottom"
-"fadeOut"
-"fadeOutToLeft"
-"fadeOutToRight"
-"fadeOutToTop"
-"fadeOutToBottom"
-"flip"
-"flipIn"
-"flipOut"
-"flipSlowDown"
-"flipFromTop"
-"flipToTop"
-"flipFromBottom"
-"flipToBottom"
-"flipFromLeftToCenter"
-"fold"
-"unfold"
-"hangOnLeft"
-"hangOnRight"
-"rotateSlowDown"
-"rotateCW"
-"rotateACW"
-"shakeMix"
-"shakeHorizontal"
-"shakeVertical"
-"squeezeMix"
-"squeezeHorizontal"
-"squeezeVertical"
-"slideInFromLeft"
-"slideInFromRight"
-"slideOutToLeft"
-"slideOutToRight"
-"slideInFromTop"
-"slideInFromBottom"
-"slideOutToTop"
-"slideOutToBottom"
-"zoomIn"
-"zoomOut"
-"popIn"
-"popOut"
-// 1.0.3
-"rubberBand"
-"jello"
-"wobble"
-"rollIn"
-"jackInTheBox"
-```
+## 🎨 Available Animations
+
+### 🎾 Bounce
+
+- bounce
+- bounceIn
+- bounceOut
+- bounceElastic
+- bounceSmall
+- bounceRotate
+- bounceJelly
+
+### ✨ Text / Glow Effects
+
+- effect3D
+- neonGlow
+- retro3D
+- emboss
+- fireGlow
+- iceGlow
+- shine
+
+### 🌫 Blur
+
+- blurIn
+- blurInZoom
+- blurInScale
+- blurInUp
+- blurInRotate
+- blurOut
+- blurOutZoom
+- blurOutScale
+- blurOutDown
+- blurOutRotate
+
+### ⚡ Flash
+
+- flash
+- flashIrregular
+- flashFast
+- flashSlow
+- flashPulse
+
+### 🎈 Float
+
+- float
+- floatSway
+- floatHorizontal
+- floatCircular
+- floatWiggle
+
+### 💡 Glow
+
+- glow
+- glowTextFlicker
+- glowRainbow
+- glowBreathing
+- glowGlitch
+
+### 🍮 Jelly
+
+- jelly
+- jellyX
+- jellyY
+- jellyIn
+- jellyOut
+
+### 🌑 Shadow / Spin / Swing / Orbit
+
+- shadow
+- shadowText
+- shadowPulse
+- shadowNeon
+- spin
+- spin3D
+- spinX
+- spinBounce
+- swing
+- swingPivot
+- swingX
+- swingY
+- orbit
+- orbitEllipse
+
+### 💓 Pulse
+
+- pulse
+- pulseInOut
+- pulseFade
+- pulseFast
+- pulseColor
+
+### 🌫 Fade
+
+- fadeIn
+- fadeOut
+- fadeInFromLeft
+- fadeInFromRight
+- fadeInFromTop
+- fadeInFromBottom
+- fadeOutToLeft
+- fadeOutToRight
+- fadeOutToTop
+- fadeOutToBottom
+- fadeInZoom
+- fadeOutZoom
+- fadeInRotate
+- fadeOutRotate
+- fadeInSkew
+- fadeOutSkew
+- fadeInFlipX
+- fadeOutFlipX
+- fadeInFlipY
+- fadeOutFlipY
+- fadeInPerspective
+- fadeOutPerspective
+
+### 🤯 Squeeze / Shake
+
+- squeezeMix
+- squeezeHorizontal
+- squeezeVertical
+- squeezeDiagonal
+- squeezePulse
+- shakeMix
+- shakeHorizontal
+- shakeVertical
+- shakeDiagonal
+- shakeQuick
+
+### 📥 Slide
+
+- slideInFromLeft
+- slideInFromRight
+- slideOutToLeft
+- slideOutToRight
+- slideInFromTop
+- slideInFromBottom
+- slideOutToTop
+- slideOutToBottom
+- slideInFromLeftOvershoot
+- slideInFromRightOvershoot
+- slideOutToLeftOvershoot
+- slideOutToRightOvershoot
+- slideInFromTopOvershoot
+- slideInFromBottomOvershoot
+- slideOutToTopOvershoot
+- slideOutToBottomOvershoot
+
+### 🔄 Flip
+
+- flip
+- flipIn
+- flipOut
+- flipSlowDown
+- flipToLeft
+- flipToRight
+- flipFromTop
+- flipToTop
+- flipToBottom
+- flipFromBottom
+- flipFromLeftToCenter
+- flipFromRightToCenter
+- flipRich
+- flipToTopRich
+- flipToBottomRich
+- flipToTopLeftRich
+- flipToRightRich
+- flipFromTopRich
+- flipFromBottomRich
+- flipFromLeftToCenterRich
+- flipFromRightToCenterRich
+
+### 📂 Fold / Unfold
+
+- fold
+- foldDeep
+- unfold
+- unfoldDeep
+
+### 🪝 Hang On
+
+- hangOnLeft
+- hangOnRight
+- hangOnTop
+- hangOnBottom
+- hangOnLeftSwing
+- hangOnRightSwing
+- hangOnTopSwing
+- hangOnBottomSwing
+- hangOnOscillate
+- hangOnDrop
+
+### 🔍 Zoom
+
+- zoomIn
+- zoomOut
+- zoomInFromLeft
+- zoomInFromRight
+- zoomInFromTop
+- zoomInFromBottom
+- zoomOutToLeft
+- zoomOutToRight
+- zoomOutToTop
+- zoomOutToBottom
+
+### 🌀 Rotate
+
+- rotateCW
+- rotateACW
+- rotateSlowDown
+- rotateX
+- rotateY
+- rotateFromLeft
+- rotateFromRight
+- rotateToLeft
+- rotateToRight
+- rotateFromTop
+- rotateFromBottom
+- rotateToTop
+- rotateToBottom
+
+### 🎉 Fun / Attention
+
+- heartBeat
+- tada
+- hinge
+- lightSpeedInLeft
+- lightSpeedOutRight
+- popIn
+- popOut
+- popBounceIn
+- popBounceOut
+- popUpIn
+- popUpOut
+- popRotateIn
+- popRotateOut
+- popBlurIn
+- popBlurOut
+- popLeftIn
+- popLeftOut
+- popRightIn
+- popRightOut
+- rubberBand
+- jello
+- wobble
+- rollIn
+- jackInTheBox
 
-##### type-name: typewriter
+---
 
-```js
-// import { AnimateTyping } from 'react-animate-z';
-<Animate
-    type="typewriter"
-    // props
-    typingWrite={{
-      dataText: ["Sushi", "Pizza", "Brötchen", "Salat"],
-      // heading?: string;
-      // className?: string;
-      // dataText?: string[];
-    }}
-/>
-
-// or
-<AnimateTyping
-    dataText ={["Sushi", "Pizza", "Brötchen", "Salat"]}
-    // heading?: string;
-    // className?: string;
-    // dataText?: string[];
-/>
-```
+#### Chain Animation
 
-## Chain Animation
 An string-arry of animation names is used to wrap the animations you want to chain.
 
 ```js
-import Animate from 'react-animate-z'
-
-const AnimationsForChaining = ["swing", "flipSlowDown", "fadeOutToBottom", "jelly"]
-
-const AnimationChain = () => {
-
-  const [animationIndex, setAnimationIndex] = useState(0)
-  const [animationType, setAnimationType] = useState(AnimationsForChaining[0])
-
-  const handleChainAnimation = () => {
-    setCounter(animationIndex+1)
-    setAnimationType(selectedItems[animationIndex+1])
-  }
+import React, { useState } from "react";
+import { AnimateTyping } from "react-animate-z";
+
+const AnimationsForChaining = [
+  "swing",
+  "flipSlowDown",
+  "fadeOutToBottom",
+  "jelly",
+];
+
+const AnimationChain: React.FC = () => {
+  // const [animationIndex, setAnimationIndex] = useState(0);
+  // const [animationType, setAnimationType] = useState(AnimationsForChaining[0]);
+
+  // const handleChainAnimation = () => {
+  //   const nextIndex = (animationIndex + 1) % AnimationsForChaining.length;
+  //   setAnimationIndex(nextIndex);
+  //   setAnimationType(AnimationsForChaining[nextIndex]);
+  // };
 
   return (
-    <Animate
-      onAnimationEnd={handleChainAnimation}
-      type={animationType}
-      duration="1000ms"
-      timing="linear"
-      iteration={1}>
-      Animate
-    </Animate>
-  )
-}
+    <>
+      <AnimateTyping
+        heading="Hello,"
+        dataText={["I am Delpi", "I build animations", "I love coding!"]}
+        cursorColor="red"
+      />
+
+      <AnimateTyping dataText="Only once" />
+
+      <AnimateTyping
+        heading="Fast typing:"
+        dataText={["speed x2", "super fast!"]}
+        typingSpeed={50}
+        deletingSpeed={20}
+        pauseTime={1000}
+      />
+    </>
+  );
+};
+
+export default AnimationChain;
 ```
 
+## 📜 License
 
-### License
-
-MIT
+MIT © Delpi

package/build/AnimBox/AnimateTyping.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface ICursorProps {
+    readonly cursorColor?: string | null;
+}
+export interface IAnimateTypingProps extends ICursorProps {
+    readonly heading?: string;
+    readonly className?: string;
+    readonly dataText?: string[] | string;
+    readonly children?: React.ReactNode | string[] | string;
+    readonly typingSpeed?: number;
+    readonly deletingSpeed?: number;
+    readonly pauseTime?: number;
+}
+declare const AnimateTyping: React.FC<IAnimateTypingProps>;
+export default AnimateTyping;

package/build/AnimBox/StyledElement.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type IBaseStyledElementProps } from "./types";
+export declare const StyledElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, IBaseStyledElementProps>> & string;

package/build/AnimBox/WrapperAnimate.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IAnimateProps } from "./types";
+export declare const WrapperAnimate: React.FC<IAnimateProps>;
+export default WrapperAnimate;

package/build/AnimBox/durations.d.ts

@@ -0,0 +1 @@
+export declare const defaultDurationMap: Record<string, string>;