99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { AnimationParams } from "animejs";
|
|
import { Component, createSignal } from "solid-js";
|
|
|
|
import { Anime } from "../../src/ts/components/common/anime/Anime";
|
|
|
|
const meta = preview.meta({
|
|
title: "Common/Anime/Anime",
|
|
component: Anime as Component,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
});
|
|
|
|
const box = {
|
|
width: "100px",
|
|
height: "100px",
|
|
"background-color": "var(--main-color)",
|
|
"border-radius": "8px",
|
|
display: "flex",
|
|
"align-items": "center",
|
|
"justify-content": "center",
|
|
color: "var(--bg-color)",
|
|
"font-weight": "bold",
|
|
};
|
|
|
|
export const FadeIn = meta.story({
|
|
render: () => (
|
|
<Anime
|
|
initial={{ opacity: 0 } as Partial<AnimationParams>}
|
|
animate={{ opacity: 1, duration: 600 } as AnimationParams}
|
|
>
|
|
<div style={box}>Fade In</div>
|
|
</Anime>
|
|
),
|
|
});
|
|
|
|
export const SlideIn = meta.story({
|
|
render: () => (
|
|
<Anime
|
|
initial={{ opacity: 0, translateY: -30 } as Partial<AnimationParams>}
|
|
animate={{ opacity: 1, translateY: 0, duration: 500 } as AnimationParams}
|
|
>
|
|
<div style={box}>Slide In</div>
|
|
</Anime>
|
|
),
|
|
});
|
|
|
|
export const ReactiveAnimation = meta.story({
|
|
render: () => {
|
|
const [expanded, setExpanded] = createSignal(false);
|
|
return (
|
|
<div>
|
|
<button
|
|
style={{
|
|
padding: "8px 16px",
|
|
cursor: "pointer",
|
|
"background-color": "var(--sub-alt-color)",
|
|
color: "var(--text-color)",
|
|
border: "none",
|
|
"border-radius": "8px",
|
|
"margin-bottom": "16px",
|
|
}}
|
|
onClick={() => setExpanded((prev) => !prev)}
|
|
>
|
|
{expanded() ? "Shrink" : "Expand"}
|
|
</button>
|
|
<Anime
|
|
animation={
|
|
{
|
|
scale: expanded() ? 1.5 : 1,
|
|
rotate: expanded() ? 45 : 0,
|
|
duration: 400,
|
|
} as AnimationParams
|
|
}
|
|
>
|
|
<div style={box}>Click</div>
|
|
</Anime>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export const CustomElement = meta.story({
|
|
render: () => (
|
|
<Anime
|
|
as="span"
|
|
initial={{ opacity: 0, translateX: -20 } as Partial<AnimationParams>}
|
|
animate={{ opacity: 1, translateX: 0, duration: 400 } as AnimationParams}
|
|
style={{ display: "inline-block" }}
|
|
>
|
|
<span style={{ color: "var(--text-color)" }}>
|
|
Rendered as a {"<span>"}
|
|
</span>
|
|
</Anime>
|
|
),
|
|
});
|