96 | {IMAGES.map((image, index) => {
97 | const imageStyle =
98 | activeIndex === index
99 | ? {
100 | backgroundColor: 'white',
101 | }
102 | : {
103 | backgroundImage: `url(${image})`,
104 | backgroundSize: 'cover',
105 | };
106 |
107 | return (
108 |
setActiveIndex(index)}
118 | />
119 | );
120 | })}
121 |
122 |
123 | {mount(
124 | (_, m) =>
125 | m && (
126 |
136 |
154 | Pull Down
155 |
156 |
157 | )
158 | )}
159 |
160 | );
161 | }
162 |
--------------------------------------------------------------------------------
/example/src/stories/demo/Sorting.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Sorting as Example } from './Sorting';
4 |
5 | const meta = {
6 | title: 'Demo/Sorting',
7 | component: Example,
8 | } satisfies Meta
;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const Sorting: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/demo/Sorting.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import {
3 | animate,
4 | useDrag,
5 | clamp,
6 | move,
7 | withEase,
8 | useValue,
9 | } from 'react-ui-animate';
10 |
11 | const ITEMS = ['Please!', 'Can you', 'order', 'me ?'];
12 |
13 | export const Sorting = () => {
14 | const originalIndex = useRef(ITEMS.map((_, i) => i));
15 | const [animationY, setAnimationY] = useValue(ITEMS.map((_, i) => i * 70));
16 | const [zIndex, setZIndex] = useValue(ITEMS.map(() => 0));
17 |
18 | const bind = useDrag(({ args: [i], down, movementY: my, movementX: mx }) => {
19 | const index = originalIndex.current.indexOf(i!);
20 | const newIndex = clamp(
21 | Math.round((index * 70 + my) / 70),
22 | 0,
23 | ITEMS.length - 1
24 | );
25 | const newOrder = move(originalIndex.current, index, newIndex);
26 |
27 | if (!down) {
28 | originalIndex.current = newOrder;
29 | }
30 |
31 | const a = [];
32 | const v = [];
33 | for (let j = 0; j < ITEMS.length; j++) {
34 | const isActive = down && j === i;
35 | a[j] = withEase(isActive ? index * 70 + my : newOrder.indexOf(j) * 70);
36 | v[j] = isActive ? 1 : 0;
37 | }
38 |
39 | setAnimationY(a);
40 | setZIndex(v);
41 | });
42 |
43 | return (
44 |
45 | {animationY.map((y, i) => (
46 |
70 | {ITEMS[i]}
71 |
72 | ))}
73 |
95 | {elements.map((e) => {
96 | return ;
97 | })}
98 |
99 |
100 | );
101 | };
102 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Interpolation.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Interpolation as Example } from './Interpolation';
4 |
5 | const meta = {
6 | title: 'Examples/Interpolation',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const Interpolation: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Interpolation.tsx:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useState } from 'react';
2 | import { animate, useValue, withSpring } from 'react-ui-animate';
3 |
4 | export const Interpolation = () => {
5 | const [open, setOpen] = useState(false);
6 | const [x, setX] = useValue(0);
7 |
8 | useLayoutEffect(() => {
9 | setX(withSpring(open ? 500 : 0));
10 | }, [open, setX]);
11 |
12 | return (
13 | <>
14 |
22 |
23 |
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Ripple.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { RippleButton as Example } from './Ripple';
4 |
5 | const meta = {
6 | title: 'Examples/RippleButton',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const RippleButton: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Ripple.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEvent, useLayoutEffect, useState } from 'react';
2 | import { animate, useValue, withTiming } from 'react-ui-animate';
3 |
4 | import '../../index.css';
5 |
6 | const RIPPLE_SIZE = 50;
7 |
8 | function Ripple({
9 | id,
10 | x,
11 | y,
12 | onRemove,
13 | }: {
14 | id: number;
15 | x: number;
16 | y: number;
17 | onRemove: (id: number) => void;
18 | }) {
19 | const [animation, setAnimation] = useValue(0);
20 |
21 | useLayoutEffect(() => {
22 | setAnimation(
23 | withTiming(1, {
24 | duration: 800,
25 | onRest: () => {
26 | onRemove(id);
27 | },
28 | })
29 | );
30 | }, [id, setAnimation, onRemove]);
31 |
32 | return (
33 |
47 | );
48 | }
49 |
50 | let _uniqueId = 0;
51 |
52 | export function RippleButton() {
53 | const [ripples, setRipples] = useState<
54 | Array<{ id: number; x: number; y: number }>
55 | >([]);
56 |
57 | const addRipple = ({
58 | clientX,
59 | clientY,
60 | currentTarget,
61 | }: MouseEvent) => {
62 | const { left, top } = currentTarget.getBoundingClientRect();
63 |
64 | setRipples((previousRipples) => [
65 | ...previousRipples,
66 | {
67 | id: _uniqueId++,
68 | x: clientX - left - RIPPLE_SIZE / 2,
69 | y: clientY - top - RIPPLE_SIZE / 2,
70 | },
71 | ]);
72 | };
73 |
74 | const removeRipple = (id: number) => {
75 | setRipples((prevRipples) =>
76 | prevRipples.filter((ripple) => ripple.id !== id)
77 | );
78 | };
79 |
80 | return (
81 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/example/src/stories/examples/SnapTo.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { SnapTo as Example } from './SnapTo';
4 |
5 | const meta = {
6 | title: 'Examples/SnapTo',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const SnapTo: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/examples/SnapTo.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react';
2 | import {
3 | animate,
4 | useDrag,
5 | useValue,
6 | snapTo,
7 | withSpring,
8 | } from 'react-ui-animate';
9 |
10 | import '../../index.css';
11 |
12 | export function SnapTo() {
13 | const [{ x, y }, setXY] = useValue({ x: 0, y: 0 });
14 | const offset = useRef({ x: 0, y: 0 });
15 |
16 | const bind = useDrag(
17 | ({ movementX, movementY, velocityX, velocityY, down }) => {
18 | if (!down) {
19 | offset.current = {
20 | x: movementX + offset.current.x,
21 | y: movementY + offset.current.y,
22 | };
23 |
24 | const snapX = snapTo(offset.current.x, velocityX, [0, 600]);
25 | const snapY = snapTo(offset.current.y, velocityY, [0, 600]);
26 |
27 | setXY({ x: withSpring(snapX), y: withSpring(snapY) });
28 |
29 | offset.current = { x: snapX, y: snapY };
30 | } else {
31 | setXY({
32 | x: movementX + offset.current.x,
33 | y: movementY + offset.current.y,
34 | });
35 | }
36 | }
37 | );
38 |
39 | return (
40 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Stagger.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import Example from './Stagger';
4 |
5 | const meta = {
6 | title: 'Examples/Stagger',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const Stagger: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/examples/Stagger.tsx:
--------------------------------------------------------------------------------
1 | import { Children, useLayoutEffect, useState } from 'react';
2 | import {
3 | useValue,
4 | useScroll,
5 | animate,
6 | withSequence,
7 | withSpring,
8 | withDelay,
9 | withTiming,
10 | } from 'react-ui-animate';
11 |
12 | const StaggerItem = ({
13 | y,
14 | index,
15 | content,
16 | }: {
17 | y: number;
18 | index: number;
19 | content: string;
20 | }) => {
21 | const [top, setTop] = useValue(0);
22 |
23 | useLayoutEffect(() => {
24 | setTop(
25 | withSequence([withDelay(index * 50), withTiming(y, { duration: 0 })])
26 | );
27 | }, [y, index, setTop]);
28 |
29 | return (
30 |
38 | {content}
39 |
40 | );
41 | };
42 |
43 | const Stagger = ({ y, children }: any) => {
44 | const childs = Children.toArray(children);
45 |
46 | return (
47 |
48 | {childs.map((child: any, i) => (
49 |
50 | ))}
51 |
52 | );
53 | };
54 |
55 | export default function App() {
56 | const [y, setY] = useState(0);
57 |
58 | useScroll(({ scrollY }) => {
59 | setY(scrollY);
60 | });
61 |
62 | return (
63 |
68 |
75 |
76 | Hello 👋
77 | I'm
78 | Dipesh
79 | Rai
80 | Welcome
81 |
82 |
83 |
14 |
35 |
34 |
42 |
50 |
51 |
52 |
53 |
73 | DIPESH
74 |
75 |
110 | //
118 | //
126 | //
127 |
128 | //
148 | // DIPESH
149 | //
150 | //
151 | // );
152 | // };
153 |
--------------------------------------------------------------------------------
/example/src/stories/gestures/MouseMove.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { MouseMove as Example } from './MouseMove';
4 |
5 | const meta = {
6 | title: 'Gestures/MouseMove',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const MouseMove: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/gestures/MouseMove.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { animate, useValue, useMouseMove } from 'react-ui-animate';
3 |
4 | export const MouseMove = () => {
5 | const [open, setOpen] = React.useState(true);
6 | const [x, setX] = useValue(0);
7 | const [y, setY] = useValue(0);
8 |
9 | const bind = useMouseMove(function ({ mouseX, mouseY }) {
10 | if (open) {
11 | setX(mouseX);
12 | setY(mouseY);
13 | }
14 | });
15 |
16 | return (
17 | <>
18 |
24 |
25 |
38 |
39 |
40 | {Array(5)
41 | .fill(null)
42 | .map((_, i) => (
43 |
53 | ))}
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/example/src/stories/gestures/Scroll.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import { Scroll as Example } from './Scroll';
4 |
5 | const meta = {
6 | title: 'Gestures/Scroll',
7 | component: Example,
8 | } satisfies Meta;
9 |
10 | export default meta;
11 | type Story = StoryObj;
12 |
13 | export const Scroll: Story = {};
14 |
--------------------------------------------------------------------------------
/example/src/stories/gestures/Scroll.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useScroll,
3 | useValue,
4 | interpolateNumbers,
5 | animate,
6 | } from 'react-ui-animate';
7 |
8 | export const Scroll = () => {
9 | const [x, setX] = useValue(100);
10 | const [color, setColor] = useValue('yellow');
11 | const [position, setPosition] = useValue('fixed');
12 | const bind = useScroll(function (event) {
13 | setX(
14 | interpolateNumbers(event.scrollY, [0, 200], [100, 300], {
15 | extrapolate: 'clamp',
16 | })
17 | );
18 |
19 | if (event.scrollY > 100) {
20 | setPosition('absolute');
21 | setColor('red');
22 | } else {
23 | setPosition('fixed');
24 | setColor('yellow');
25 | }
26 | });
27 |
28 | return (
29 | <>
30 |
40 |
setColor('red')}
42 | style={{
43 | width: 100,
44 | height: 100,
45 | backgroundColor: color,
46 | top: 100,
47 | left: x,
48 | position,
49 | }}
50 | />
51 |
52 |