solid-flip - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.d.ts

 import { Accessor } from 'solid-js';
 import { Context } from 'solid-js';
+import { CSSStyleKeys } from './types';
+import { CSSStyleKeys as CSSStyleKeys_2 } from '../types';
 import { JSX } from 'solid-js/jsx-runtime';
 
+declare type ArrayOr<T> = T | T[];
+
 declare interface DOMState {
@@ -10,3 +14,11 @@ rect: DOMRect;
     position: string;
-    computedStyle?: CSSStyleDeclaration;
+    borderTopLeftXRadius: number;
+    borderTopLeftYRadius: number;
+    borderTopRightXRadius: number;
+    borderTopRightYRadius: number;
+    borderBottomLeftXRadius: number;
+    borderBottomLeftYRadius: number;
+    borderBottomRightXRadius: number;
+    borderBottomRightYRadius: number;
+    additionalProperties?: Record<string, unknown>;
 }
@@ -24,5 +36,5 @@
     setFirstState: (id: string, state: DOMState | null) => void;
-    recordFirstState: (id: string, element: Element) => void;
+    recordFirstState: (id: string, element: Element, properties?: CSSStyleKeys_2[]) => void;
     setLastState: (id: string, state: DOMState | null) => void;
-    recordLastState: (id: string, element: Element) => void;
+    recordLastState: (id: string, element: Element, properties?: CSSStyleKeys_2[]) => void;
 }
@@ -34,3 +46,4 @@
     easing?: string;
-    with?: unknown[] | unknown;
+    properties?: ArrayOr<CSSStyleKeys>;
+    with?: ArrayOr<unknown>;
     children: JSX.Element;
@@ -37,0 +50,0 @@ }

dist/index.es.js

 import { createComponent, isDev } from "solid-js/web";
 import { createContext, createSignal, useContext, createMemo, splitProps, mergeProps, onMount, createComputed, on, createEffect, onCleanup } from "solid-js";
-const captureState = (element) => {
+const dimensionToNumber = (value, parent) => {
+  if (value.endsWith("px")) return parseFloat(value.replace("px", ""));
+  if (value.endsWith("%")) return parent * (parseFloat(value.replace("%", "")) / 100);
+  return 0;
+};
+const dimensionsToNumber = (value, parent) => {
+  if (!value.includes(" ")) {
+    const result = dimensionToNumber(value, parent);
+    return [result, result];
+  }
+  const [x, y] = value.split(" ");
+  return [dimensionToNumber(x, parent), dimensionToNumber(y, parent)];
+};
+const captureState = (element, additional = []) => {
   const style = getComputedStyle(element);
+  const rect = element.getBoundingClientRect();
+  const size = Math.max(rect.width, rect.height);
+  const additionalProperties = additional.reduce((acc, property) => ({
+    ...acc,
+    [property]: style == null ? void 0 : style[property]
+  }), {});
+  const scale = style.scale.split(" ").map((it) => {
+    const value = Number(it);
+    if (!Number.isFinite(value)) return 1;
+    return value;
+  });
+  const [scaleX, scaleY] = scale.length === 1 ? [scale[0], scale[0]] : scale;
+  const [borderTopLeftXRadius, borderTopLeftYRadius] = dimensionsToNumber(style.borderTopLeftRadius, size);
+  const [borderTopRightXRadius, borderTopRightYRadius] = dimensionsToNumber(style.borderTopRightRadius, size);
+  const [borderBottomLeftXRadius, borderBottomLeftYRadius] = dimensionsToNumber(style.borderBottomLeftRadius, size);
+  const [borderBottomRightXRadius, borderBottomRightYRadius] = dimensionsToNumber(style.borderBottomRightRadius, size);
   return {
-    rect: element.getBoundingClientRect(),
+    rect,
     color: style.backgroundColor,
     opacity: style.opacity,
     position: style.position,
-    computedStyle: style
+    borderTopLeftXRadius: borderTopLeftXRadius * scaleX,
+    borderTopLeftYRadius: borderTopLeftYRadius * scaleY,
+    borderTopRightXRadius: borderTopRightXRadius * scaleX,
+    borderTopRightYRadius: borderTopRightYRadius * scaleY,
+    borderBottomLeftXRadius: borderBottomLeftXRadius * scaleX,
+    borderBottomLeftYRadius: borderBottomLeftYRadius * scaleY,
+    borderBottomRightXRadius: borderBottomRightXRadius * scaleX,
+    borderBottomRightYRadius: borderBottomRightYRadius * scaleY,
+    additionalProperties
   };
@@ -32,4 +69,4 @@ };
       },
-      recordFirstState: (id, element) => {
-        const newState = captureState(element);
+      recordFirstState: (id, element, properties = []) => {
+        const newState = captureState(element, properties);
         if (newState.rect.width === 0 && newState.rect.height === 0) return;
@@ -47,4 +84,4 @@ setFirstState((prev) => ({
       },
-      recordLastState: (id, element) => {
-        const newState = captureState(element);
+      recordLastState: (id, element, properties = []) => {
+        const newState = captureState(element, properties);
         if (newState.rect.width === 0 && newState.rect.height === 0) return;
@@ -133,3 +170,3 @@ setLastState((prev) => ({
     with: []
-  }, props), ["duration", "easing"], ["with"]);
+  }, props), ["duration", "easing", "properties"], ["with"]);
   const [unflips, setUnflips] = createSignal([]);
@@ -140,2 +177,8 @@ const triggerWith = createMemo(() => {
   });
+  const properties = createMemo(() => {
+    const value = animationProps.properties;
+    if (!value) return [];
+    if (Array.isArray(value)) return value;
+    return [value];
+  });
   let result = null;
@@ -152,3 +195,3 @@ let animation = null;
       animation = null;
-      const afterState = captureState(result);
+      const afterState = captureState(result, properties());
       setLastState(local.id, afterState);
@@ -180,4 +223,4 @@ requestAnimationFrame(() => {
         const deltaHeight = firstState.rect.height / afterState.rect.height / parentDeltaHeight;
-        const unflipStates = unflips().map(captureState);
-        animation = result.animate([{
+        const unflipStates = unflips().map((it) => captureState(it, properties()));
+        const startKeyframe = {
           transformOrigin: "50% 50%",
@@ -187,4 +230,18 @@ translate: `${deltaX}px ${deltaY}px`,
           backgroundColor: firstState.color,
-          opacity: firstState.opacity
-        }, {}], {
+          opacity: firstState.opacity,
+          borderTopLeftRadius: `${firstState.borderTopLeftXRadius / deltaWidth}px ${firstState.borderTopLeftYRadius / deltaHeight}px`,
+          borderTopRightRadius: `${firstState.borderTopRightXRadius / deltaWidth}px ${firstState.borderTopRightYRadius / deltaHeight}px`,
+          borderBottomLeftRadius: `${firstState.borderBottomLeftXRadius / deltaWidth}px ${firstState.borderBottomLeftYRadius / deltaHeight}px`,
+          borderBottomRightRadius: `${firstState.borderBottomRightXRadius / deltaWidth}px ${firstState.borderBottomRightYRadius / deltaHeight}px`
+        };
+        if (animationProps.properties) {
+          const properties2 = Array.isArray(animationProps.properties) ? animationProps.properties : [animationProps.properties];
+          properties2.forEach((property) => {
+            var _a;
+            const value = (_a = firstState.additionalProperties) == null ? void 0 : _a[property];
+            if (value) startKeyframe[property] = value;
+            else console.warn(`Property "${property}" is not found in the first state`);
+          });
+        }
+        animation = result.animate([startKeyframe, {}], {
           duration: animationProps.duration,
@@ -217,3 +274,3 @@ easing: animationProps.easing
     } else {
-      recordFirstState(local.id, result);
+      recordFirstState(local.id, result, properties());
     }
@@ -239,3 +296,3 @@ };
     }
-    recordFirstState(local.id, result);
+    recordFirstState(local.id, result, properties());
   }, {
@@ -254,3 +311,3 @@ defer: true
     }
-    recordFirstState(local.id, result);
+    recordFirstState(local.id, result, properties());
   });
@@ -257,0 +314,0 @@ return createComponent(NestedFlipProvider, {

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const n=e=>{const t=getComputedStyle(e);return{rect:e.getBoundingClientRect(),color:t.backgroundColor,opacity:t.opacity,position:t.position,computedStyle:t}},i=r.createContext(),{Provider:o}=i,l=r.createContext(),s=e=>{const n=r.useContext(i);if(!n)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:o,getLastState:s}=n,c=r.useContext(l),a=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==c?void 0:c.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),d=r.createMemo((()=>{const t=s(e.id);if(!t)return null;const r=null==c?void 0:c.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(l.Provider,{get value(){return{parentId:()=>e.id,firstParentState:a,lastParentState:d,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const o=r.useContext(i),c=r.useContext(l);if(!o)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:a,setLastState:d,recordFirstState:u}=o,[p,f,h]=r.splitProps(r.mergeProps({duration:300,easing:"ease-in-out",with:[]},e),["duration","easing"],["with"]),[g,m]=r.createSignal([]),y=r.createMemo((()=>{const e=f.with;return Array.isArray(e)?e:[e]}));let w=null,S=null;const v=()=>{if(!(w instanceof Element))return void console.warn("Flip children must be a single DOM node",w);const e=a(h.id);if(e){null==S||S.cancel(),S=null;const t=n(w);d(h.id,t),requestAnimationFrame((()=>{if(!(w instanceof Element))return void console.warn("Flip children must be a single DOM node");const r=null==c?void 0:c.firstParentState(),i=null==c?void 0:c.lastParentState();let o=0,l=0,s=1,a=1;if(i&&r){const e=(r.rect.width-i.rect.width)/2,t=(r.rect.height-i.rect.height)/2;o=r.rect.left-i.rect.left+e,l=r.rect.top-i.rect.top+t,s=r.rect.width/i.rect.width,a=r.rect.height/i.rect.height}const d=(e.rect.width-t.rect.width)/2,u=(e.rect.height-t.rect.height)/2,f=-1*o+e.rect.left-t.rect.left+d,h=-1*l+e.rect.top-t.rect.top+u,m=e.rect.width/t.rect.width/s,y=e.rect.height/t.rect.height/a,v=g().map(n);S=w.animate([{transformOrigin:"50% 50%",translate:`${f}px ${h}px`,scale:`${m} ${y}`,backgroundColor:e.color,opacity:e.opacity},{}],{duration:p.duration,easing:p.easing}),g().forEach(((e,r)=>{const n=v[r],i=n.rect.left-t.rect.left,o=n.rect.top-t.rect.top,l=()=>{const t=e,[r,s]=getComputedStyle(w).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(s))return t.style.removeProperty("scale"),void t.style.removeProperty("translate");const c=1/r,a=1/s,d=n.rect.width*(c-1)/2+i*(c-1),u=n.rect.height*(a-1)/2+o*(a-1);t.style.setProperty("translate",`${d}px ${u}px`),t.style.setProperty("scale",`${c} ${a}`),requestAnimationFrame(l)};l()}))}))}else u(h.id,w)};return r.onMount((()=>{w instanceof Element?(t.isDev&&(w instanceof HTMLElement||w instanceof SVGElement)&&(w.dataset.flipId=h.id),w.parentElement&&v()):console.warn("Flip children must be a single DOM node")})),r.createComputed(r.on(y,(()=>{w instanceof Element?u(h.id,w):console.warn("Flip children must be a single DOM node")}),{defer:!0})),r.createEffect(r.on(y,(()=>{v()}),{defer:!0})),r.onCleanup((()=>{w instanceof Element?u(h.id,w):console.warn("Flip children must be a single DOM node")})),t.createComponent(s,{get id(){return h.id},get unflips(){return g()},setUnflips:m,get children(){return w=e.children}})},e.FlipContext=i,e.FlipProvider=e=>{const[i,l]=r.createSignal({}),[s,c]=r.createSignal({});return t.createComponent(o,{value:{firstState:i,lastState:s,getFirstState:e=>i()[e],getLastState:e=>s()[e],setFirstState:(e,t)=>{l((r=>({...r,[e]:t})))},recordFirstState:(e,t)=>{const r=n(t);0===r.rect.width&&0===r.rect.height||l((t=>({...t,[e]:r})))},setLastState:(e,t)=>{c((r=>({...r,[e]:t})))},recordLastState:(e,t)=>{const r=n(t);0===r.rect.width&&0===r.rect.height||c((t=>({...t,[e]:r})))}},get children(){return e.children}})},e.NestedFlipContext=l,e.NestedFlipProvider=s,e.Unflip=e=>{const t=r.useContext(l);let n=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;if(!(Array.isArray(n)?n.every((e=>e instanceof Element)):n instanceof Element))return void console.warn("Unflip children must be a DOM node",n);const r=t.parentId();(e.id??r)===r&&(null==t||t.setUnflips([...t.unflips(),...Array.isArray(n)?n:[n]]))}))),n=e.children},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("solid-js/web"),require("solid-js")):"function"==typeof define&&define.amd?define(["exports","solid-js/web","solid-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["solid-flip"]={},e.solid,e.solid)}(this,(function(e,t,r){"use strict";const i=(e,t)=>e.endsWith("px")?parseFloat(e.replace("px","")):e.endsWith("%")?t*(parseFloat(e.replace("%",""))/100):0,o=(e,t)=>{if(!e.includes(" ")){const r=i(e,t);return[r,r]}const[r,o]=e.split(" ");return[i(r,t),i(o,t)]},n=(e,t=[])=>{const r=getComputedStyle(e),i=e.getBoundingClientRect(),n=Math.max(i.width,i.height),s=t.reduce(((e,t)=>({...e,[t]:null==r?void 0:r[t]})),{}),a=r.scale.split(" ").map((e=>{const t=Number(e);return Number.isFinite(t)?t:1})),[l,d]=1===a.length?[a[0],a[0]]:a,[c,u]=o(r.borderTopLeftRadius,n),[p,h]=o(r.borderTopRightRadius,n),[f,g]=o(r.borderBottomLeftRadius,n),[m,b]=o(r.borderBottomRightRadius,n);return{rect:i,color:r.backgroundColor,opacity:r.opacity,position:r.position,borderTopLeftXRadius:c*l,borderTopLeftYRadius:u*d,borderTopRightXRadius:p*l,borderTopRightYRadius:h*d,borderBottomLeftXRadius:f*l,borderBottomLeftYRadius:g*d,borderBottomRightXRadius:m*l,borderBottomRightYRadius:b*d,additionalProperties:s}},s=r.createContext(),{Provider:a}=s,l=r.createContext(),d=e=>{const i=r.useContext(s);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:o,getLastState:n}=i,a=r.useContext(l),d=r.createMemo((()=>{const t=o(e.id);if(!t)return null;const r=null==a?void 0:a.firstParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}})),c=r.createMemo((()=>{const t=n(e.id);if(!t)return null;const r=null==a?void 0:a.lastParentState();return{...t,rect:DOMRect.fromRect({x:t.rect.left+((null==r?void 0:r.rect.left)??0),y:t.rect.top+((null==r?void 0:r.rect.top)??0),width:t.rect.width,height:t.rect.height})}}));return t.createComponent(l.Provider,{get value(){return{parentId:()=>e.id,firstParentState:d,lastParentState:c,unflips:()=>e.unflips,setUnflips:e.setUnflips}},get children(){return e.children}})};e.Flip=e=>{const i=r.useContext(s),o=r.useContext(l);if(!i)return console.warn("Flip must be used inside a FlipProvider"),e.children;const{getFirstState:a,setLastState:c,recordFirstState:u}=i,[p,h,f]=r.splitProps(r.mergeProps({duration:300,easing:"ease-in-out",with:[]},e),["duration","easing","properties"],["with"]),[g,m]=r.createSignal([]),b=r.createMemo((()=>{const e=h.with;return Array.isArray(e)?e:[e]})),R=r.createMemo((()=>{const e=p.properties;return e?Array.isArray(e)?e:[e]:[]}));let y=null,w=null;const x=()=>{if(!(y instanceof Element))return void console.warn("Flip children must be a single DOM node",y);const e=a(f.id);if(e){null==w||w.cancel(),w=null;const t=n(y,R());c(f.id,t),requestAnimationFrame((()=>{if(!(y instanceof Element))return void console.warn("Flip children must be a single DOM node");const r=null==o?void 0:o.firstParentState(),i=null==o?void 0:o.lastParentState();let s=0,a=0,l=1,d=1;if(i&&r){const e=(r.rect.width-i.rect.width)/2,t=(r.rect.height-i.rect.height)/2;s=r.rect.left-i.rect.left+e,a=r.rect.top-i.rect.top+t,l=r.rect.width/i.rect.width,d=r.rect.height/i.rect.height}const c=(e.rect.width-t.rect.width)/2,u=(e.rect.height-t.rect.height)/2,h=-1*s+e.rect.left-t.rect.left+c,f=-1*a+e.rect.top-t.rect.top+u,m=e.rect.width/t.rect.width/l,b=e.rect.height/t.rect.height/d,x=g().map((e=>n(e,R()))),v={transformOrigin:"50% 50%",translate:`${h}px ${f}px`,scale:`${m} ${b}`,backgroundColor:e.color,opacity:e.opacity,borderTopLeftRadius:`${e.borderTopLeftXRadius/m}px ${e.borderTopLeftYRadius/b}px`,borderTopRightRadius:`${e.borderTopRightXRadius/m}px ${e.borderTopRightYRadius/b}px`,borderBottomLeftRadius:`${e.borderBottomLeftXRadius/m}px ${e.borderBottomLeftYRadius/b}px`,borderBottomRightRadius:`${e.borderBottomRightXRadius/m}px ${e.borderBottomRightYRadius/b}px`};if(p.properties){(Array.isArray(p.properties)?p.properties:[p.properties]).forEach((t=>{var r;const i=null==(r=e.additionalProperties)?void 0:r[t];i?v[t]=i:console.warn(`Property "${t}" is not found in the first state`)}))}w=y.animate([v,{}],{duration:p.duration,easing:p.easing}),g().forEach(((e,r)=>{const i=x[r],o=i.rect.left-t.rect.left,n=i.rect.top-t.rect.top,s=()=>{const t=e,[r,a]=getComputedStyle(y).scale.split(" ").map(Number);if(!Number.isFinite(r)||!Number.isFinite(a))return t.style.removeProperty("scale"),void t.style.removeProperty("translate");const l=1/r,d=1/a,c=i.rect.width*(l-1)/2+o*(l-1),u=i.rect.height*(d-1)/2+n*(d-1);t.style.setProperty("translate",`${c}px ${u}px`),t.style.setProperty("scale",`${l} ${d}`),requestAnimationFrame(s)};s()}))}))}else u(f.id,y,R())};return r.onMount((()=>{y instanceof Element?(t.isDev&&(y instanceof HTMLElement||y instanceof SVGElement)&&(y.dataset.flipId=f.id),y.parentElement&&x()):console.warn("Flip children must be a single DOM node")})),r.createComputed(r.on(b,(()=>{y instanceof Element?u(f.id,y,R()):console.warn("Flip children must be a single DOM node")}),{defer:!0})),r.createEffect(r.on(b,(()=>{x()}),{defer:!0})),r.onCleanup((()=>{y instanceof Element?u(f.id,y,R()):console.warn("Flip children must be a single DOM node")})),t.createComponent(d,{get id(){return f.id},get unflips(){return g()},setUnflips:m,get children(){return y=e.children}})},e.FlipContext=s,e.FlipProvider=e=>{const[i,o]=r.createSignal({}),[s,l]=r.createSignal({});return t.createComponent(a,{value:{firstState:i,lastState:s,getFirstState:e=>i()[e],getLastState:e=>s()[e],setFirstState:(e,t)=>{o((r=>({...r,[e]:t})))},recordFirstState:(e,t,r=[])=>{const i=n(t,r);0===i.rect.width&&0===i.rect.height||o((t=>({...t,[e]:i})))},setLastState:(e,t)=>{l((r=>({...r,[e]:t})))},recordLastState:(e,t,r=[])=>{const i=n(t,r);0===i.rect.width&&0===i.rect.height||l((t=>({...t,[e]:i})))}},get children(){return e.children}})},e.NestedFlipContext=l,e.NestedFlipProvider=d,e.Unflip=e=>{const t=r.useContext(l);let i=null;return r.createEffect(r.on((()=>e.id),(()=>{if(!t)return;if(!(Array.isArray(i)?i.every((e=>e instanceof Element)):i instanceof Element))return void console.warn("Unflip children must be a DOM node",i);const r=t.parentId();(e.id??r)===r&&(null==t||t.setUnflips([...t.unflips(),...Array.isArray(i)?i:[i]]))}))),i=e.children},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package.json

 {
   "name": "solid-flip",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit",
@@ -5,0 +5,0 @@ "main": "dist/index.umd.js",

README.md

@@ -1,2 +0,2 @@
-# solid-flip
+# Solid-flip
 > The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit
@@ -66,3 +66,3 @@
    
-    <Flip id={'my-flip-id'} with={show()}> // set `with` property that will be used to determine whether the content should be animated
+    <Flip id={'my-flip-id'} with={show()}> // set `with` property that will be used to determine when the content should be animated
       <div class={show() ? 'show' : 'hidden'}>Animated content</div>
@@ -76,7 +76,83 @@ </Flip>
 
-# Usage
 ## Flip
-> TODO
 
+https://github.com/user-attachments/assets/69367673-8edc-4c7d-816c-59a15743b05d
+
+```tsx
+<Flip id={'flip2'} with={flip2()}>
+  <div class={flip2() ? 'card blue fullscreen' : 'card red'} onClick={() => setFlip2(!flip2())}>
+    <Unflip>
+      <div>
+        {flip2() ? 'Click Again!' : 'Click!'}
+      </div>
+    </Unflip>
+  </div>
+</Flip>
+```
+
+## Flip + For
+
+https://github.com/user-attachments/assets/a6b4f260-f76a-4ce6-b5a9-448697607a3b
+
+```tsx
+<div class={'grid'}>
+  <For each={flip5()}>
+    {(item) => (
+      <Flip id={`flip5-${item}`} with={flip5()}>
+        <div class={'card'}>
+          {item}
+        </div>
+      </Flip>
+    )}
+  </For>
+</div>
+```
+
+## Nested Flip
+
+https://github.com/user-attachments/assets/0547a512-7032-4cce-940f-512de78538ef
+
+```tsx
+<div class={'grid'}>
+  <For each={flip6()}>
+    {(item) => (
+      <Flip id={`flip6-group-${item.id}`} with={flip6()}>
+        <div class={'card grid'}>
+          <For each={item.items}>
+            {(subItem) => (
+              <Flip id={`flip6-${subItem}`} with={flip6()}>
+                <div class={'card'}>
+                  {subItem}
+                </div>
+              </Flip>
+            )}
+          </For>
+        </div>
+      </Flip>
+    )}
+  </For>
+</div>
+```
+
+# API
+## FlipProvider
+`FlipProvider` component is used to wrap the root component of your application. It provides the context for the flip animation.
+If you don't wrap your root component with `FlipProvider`, the flip animation will not work.
+
+## Flip
+`Flip` component is used to wrap the content that you want to animate. It directly passes children.
+
+| Property   | Type                   | Default      | Description                                                    |
+|------------|------------------------|--------------|----------------------------------------------------------------|
+| id         | `string`               | _(required)_ | The unique id of the flip component                            |
+| with       | `unknown \| unknown[]` | []           | The condition to determine when the content should be animated |
+| duration   | `number`               | 300          | The duration of the animation                                  |
+| easing     | `string`               | 'ease'       | The easing of the animation                                    |
+| properties | `string \| string[]`   | []           | The additional properties that will be animated                |
+
 ## Unflip
-> TODO
+`Unflip` component is used to warp the content that ignore parent flip animation. It directly passes children.
+
+| Property | Type     | Default | Description                            |
+|----------|----------|---------|----------------------------------------|
+| id       | `string` | -       | A parent id that ignore flip animation |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29349

increased by38.88%

Lines of code

432

increased by21.01%

Number of lines in readme file

157

increased by93.83%

No dependency changes