solid-flip
v0.5.2
Published
The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit
Downloads
4,999
Readme
Solid-flip
The most advanced Flip animation library for Solid.js inspired by react-flip-toolkit
Feature
- 🚀 Fully typed with TypeScript
- 🫙 Zero dependency
- ✅ Support Solid.js
- ✅ Support nested flip
- 📦 Support scale animation without children
Roadmap
- [X] add
enter
,exit
properties inFlip
- [ ] add
onEnter
,onExit
properties inFlip
- [ ] spring-based animation config
- [ ] physics-based animation config
Installation
pnpm add solid-flip
or with npm
npm install solid-flip
Quick Start
- Wrap your root component with
FlipProvider
import { FlipProvider } from 'solid-flip'; const root = document.getElementById('root'); render(() => ( <FlipProvider> // Like this <App/> </FlipProvider> ), root!);
- Use
Flip
component to wrap your animated componentimport { Flip } from 'solid-flip'; <Flip id={'my-flip-id'}> // `id` property need to be unique <div class={'show'}>Animated content</div> </Flip>
- Change the content of
Flip
component
orimport { Flip } from 'solid-flip'; const [show, setShow] = createSignal(false); <Show when={show()} fallback={ <Flip id={'my-flip-id'}> <div class={'hidden'}>Animated content</div> </Flip> } > <Flip id={'my-flip-id'}> <div class={'show'}>Animated content</div> </Flip> </Show>
import { Flip } from 'solid-flip'; const [show, setShow] = createSignal(false); <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> </Flip>
End! You have successfully added flip animation to your component!
Example
Please check the example folder or codesandbox for more details.
Flip
<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
<div class={'grid'}>
<For each={flip5()}>
{(item) => (
<Flip id={`flip5-${item}`} with={flip5()}>
<div class={'card'}>
{item}
</div>
</Flip>
)}
</For>
</div>
Nested Flip
<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.
| Property | Type | Default | Description |
|---------------|--------------|---------|-------------------------------------------------------------------------------------------------------------------|
| defaultConfig | FlipConfig
| - | The default configuration of the flip animation. If you set the value in Flip
component, it will be overridden. |
interface FlipConfig {
duration?: number;
easing?: string;
enter?: string | boolean;
exit?: string | boolean;
preserve?: false | 'position' | 'scale' | 'all';
}
See Flip
component for more details.
- Usage Example
import { FlipProvider } from 'solid-flip'; const root = document.getElementById('root'); render(() => ( <FlipProvider> <App/> </FlipProvider> ), root!);
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 |
| enter | string \| boolean
| false | If this value is truthy, The element will be animate when the element is inserted. The value means the initial class name of the element. If you set this value as true
, entering class name will be set as enter
|
| exit | string \| boolean
| false | If this value is truthy, The element will be animate when the element is removed. The value means the class name of the element after element removed. If you set this value as true
, exiting class name will be set as exit
|
| preserve | false \| 'position' \| 'scale' \| 'all'
| false | This value manipulates the element's style when the element runs in 'enter' or 'exit'. If you set this value as position
, the element will be use the value when the element is connected to DOM. So that It prevent the element moving to 'enter' or 'exit' position. It will be useful when you set the 'exit' animation's position as absolute or fixed. 'scale' and 'all' also act like 'position'. |
- Usage Example
import { Flip } from 'solid-flip'; <Flip id={'my-flip-id'} with={flip()}> <div class={flip() ? 'show' : 'hidden'}>Animated content</div> </Flip>
Unflip
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 |
- Usage Example
import { Unflip } from 'solid-flip'; <Flip id={'my-flip-id'}> <div> Animated content <Unflip> // id is not required. Unflip component will find the parent flip component automatically. <div>Ignore flip animation</div> </Unflip> </div> </Flip>