Skip to content

Commit 07ba14c

Browse files
committed
0.15.0
1 parent f732265 commit 07ba14c

15 files changed

+247
-65
lines changed

docs/API.md

+102-19
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,23 @@
88
- [useAnimation](API.md#useanimation)
99
- [useAnimationFunction](API.md#useanimationfunction)
1010
- [useTransitionAnimation](API.md#usetransitionanimation)
11+
- [useScrollTimeline](API.md#usescrolltimeline)
12+
- [useViewTimeline](API.md#useviewtimeline)
1113

1214
### Interfaces
1315

1416
- [TypedKeyframeEffectOptions](interfaces/TypedKeyframeEffectOptions.md)
1517
- [TransitionGroupProps](interfaces/TransitionGroupProps.md)
1618
- [BaseAnimationHandle](interfaces/BaseAnimationHandle.md)
1719
- [AnimationHandle](interfaces/AnimationHandle.md)
18-
- [AnimationOptions](interfaces/AnimationOptions.md)
1920
- [AnimationFunctionHandle](interfaces/AnimationFunctionHandle.md)
2021
- [AnimationFunctionOptions](interfaces/AnimationFunctionOptions.md)
2122
- [TransitionAnimationHandle](interfaces/TransitionAnimationHandle.md)
2223
- [TransitionAnimationOptions](interfaces/TransitionAnimationOptions.md)
24+
- [ScrollTimelineOpts](interfaces/ScrollTimelineOpts.md)
25+
- [ViewTimelineOpts](interfaces/ViewTimelineOpts.md)
26+
- [AnimationOptions](interfaces/AnimationOptions.md)
27+
- [TimelineDefinition](interfaces/TimelineDefinition.md)
2328

2429
### Type Aliases
2530

@@ -33,6 +38,9 @@
3338
- [ComputedTimingContext](API.md#computedtimingcontext)
3439
- [AnimationFunction](API.md#animationfunction)
3540
- [TransitionAnimationDefinition](API.md#transitionanimationdefinition)
41+
- [AnimationDefinition](API.md#animationdefinition)
42+
- [ScrollTimelineAxis](API.md#scrolltimelineaxis)
43+
- [ViewTimelineInset](API.md#viewtimelineinset)
3644

3745
## Functions
3846

@@ -54,13 +62,13 @@ A component to manage enter/update/exit of its children by key, that works simil
5462

5563
#### Defined in
5664

57-
[src/react/components/TransitionGroup.tsx:74](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/components/TransitionGroup.tsx#L74)
65+
[src/react/components/TransitionGroup.tsx:74](https://github.com/inokawa/react-animatable/blob/f732265/src/react/components/TransitionGroup.tsx#L74)
5866

5967
___
6068

6169
### useAnimation
6270

63-
**useAnimation**<`Args`\>(`keyframe`, `options?`): [`AnimationHandle`](interfaces/AnimationHandle.md)<`Args`\>
71+
**useAnimation**<`Args`\>(`...args`): [`AnimationHandle`](interfaces/AnimationHandle.md)<`Args`\>
6472

6573
A basic hook to use Web Animations API. See [AnimationHandle](interfaces/AnimationHandle.md).
6674

@@ -74,16 +82,15 @@ A basic hook to use Web Animations API. See [AnimationHandle](interfaces/Animati
7482

7583
| Name | Type |
7684
| :------ | :------ |
77-
| `keyframe` | [`TypedKeyframe`](API.md#typedkeyframe) \| [`TypedKeyframe`](API.md#typedkeyframe)[] \| [`GetKeyframeFunction`](API.md#getkeyframefunction)<`Args`\> |
78-
| `options?` | [`AnimationOptions`](interfaces/AnimationOptions.md) |
85+
| `...args` | [`AnimationDefinition`](API.md#animationdefinition)<`Args`\> |
7986

8087
#### Returns
8188

8289
[`AnimationHandle`](interfaces/AnimationHandle.md)<`Args`\>
8390

8491
#### Defined in
8592

86-
[src/react/hooks/useAnimation.ts:163](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L163)
93+
[src/react/hooks/useAnimation.ts:104](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L104)
8794

8895
___
8996

@@ -112,7 +119,7 @@ Same as [useAnimation](API.md#useanimation), but it drives function not React el
112119

113120
#### Defined in
114121

115-
[src/react/hooks/useAnimationFunction.ts:69](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimationFunction.ts#L69)
122+
[src/react/hooks/useAnimationFunction.ts:69](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimationFunction.ts#L69)
116123

117124
___
118125

@@ -138,7 +145,47 @@ This hook must be used under [TransitionGroup](API.md#transitiongroup) component
138145

139146
#### Defined in
140147

141-
[src/react/hooks/useTransitionAnimation.ts:38](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useTransitionAnimation.ts#L38)
148+
[src/react/hooks/useTransitionAnimation.ts:38](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useTransitionAnimation.ts#L38)
149+
150+
___
151+
152+
### useScrollTimeline
153+
154+
**useScrollTimeline**(`opts?`): [`TimelineDefinition`](interfaces/TimelineDefinition.md)
155+
156+
#### Parameters
157+
158+
| Name | Type |
159+
| :------ | :------ |
160+
| `opts` | [`ScrollTimelineOpts`](interfaces/ScrollTimelineOpts.md) |
161+
162+
#### Returns
163+
164+
[`TimelineDefinition`](interfaces/TimelineDefinition.md)
165+
166+
#### Defined in
167+
168+
[src/react/hooks/useScrollTimeline.ts:11](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useScrollTimeline.ts#L11)
169+
170+
___
171+
172+
### useViewTimeline
173+
174+
**useViewTimeline**(`opts?`): [`TimelineDefinition`](interfaces/TimelineDefinition.md)
175+
176+
#### Parameters
177+
178+
| Name | Type |
179+
| :------ | :------ |
180+
| `opts` | [`ViewTimelineOpts`](interfaces/ViewTimelineOpts.md) |
181+
182+
#### Returns
183+
184+
[`TimelineDefinition`](interfaces/TimelineDefinition.md)
185+
186+
#### Defined in
187+
188+
[src/react/hooks/useViewTimeline.ts:16](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useViewTimeline.ts#L16)
142189

143190
## Type Aliases
144191

@@ -150,17 +197,17 @@ Strictly typed [Keyframe](https://developer.mozilla.org/en-US/docs/Web/API/Web_A
150197

151198
#### Defined in
152199

153-
[src/core/waapi.ts:17](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L17)
200+
[src/core/waapi.ts:17](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L17)
154201

155202
___
156203

157204
### TypedEasing
158205

159-
Ƭ **TypedEasing**: `NonNullable`<`Exclude`<`CSSProperties`[``"animationTimingFunction"``], `CSSProperties`[``"all"``]\>\>
206+
Ƭ **TypedEasing**: `Exclude`<`CSSProperties`[``"animationTimingFunction"``], `CSSProperties`[``"all"``] \| `undefined`\>
160207

161208
#### Defined in
162209

163-
[src/core/waapi.ts:22](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L22)
210+
[src/core/waapi.ts:22](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L22)
164211

165212
___
166213

@@ -180,7 +227,7 @@ A function to define keyframe dynamically
180227

181228
#### Defined in
182229

183-
[src/core/waapi.ts:31](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L31)
230+
[src/core/waapi.ts:32](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L32)
184231

185232
___
186233

@@ -190,7 +237,7 @@ ___
190237

191238
#### Defined in
192239

193-
[src/core/waapi.ts:4](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L4)
240+
[src/core/waapi.ts:4](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L4)
194241

195242
___
196243

@@ -206,7 +253,7 @@ ___
206253

207254
#### Defined in
208255

209-
[src/core/waapi.ts:74](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L74)
256+
[src/core/waapi.ts:79](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L79)
210257

211258
___
212259

@@ -216,7 +263,7 @@ ___
216263

217264
#### Defined in
218265

219-
[src/core/waapi.ts:145](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L145)
266+
[src/core/waapi.ts:150](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L150)
220267

221268
___
222269

@@ -232,7 +279,7 @@ ___
232279

233280
#### Defined in
234281

235-
[src/react/hooks/useAnimation.ts:29](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L29)
282+
[src/react/hooks/useAnimation.ts:38](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L38)
236283

237284
___
238285

@@ -244,7 +291,7 @@ Non nullable [ComputedEffectTiming](https://developer.mozilla.org/en-US/docs/Web
244291

245292
#### Defined in
246293

247-
[src/react/hooks/useAnimationFunction.ts:32](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimationFunction.ts#L32)
294+
[src/react/hooks/useAnimationFunction.ts:32](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimationFunction.ts#L32)
248295

249296
___
250297

@@ -265,7 +312,7 @@ In this callback you can update any state or ref in JS.
265312

266313
#### Defined in
267314

268-
[src/react/hooks/useAnimationFunction.ts:42](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimationFunction.ts#L42)
315+
[src/react/hooks/useAnimationFunction.ts:42](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimationFunction.ts#L42)
269316

270317
___
271318

@@ -275,4 +322,40 @@ ___
275322

276323
#### Defined in
277324

278-
[src/react/hooks/useTransitionAnimation.ts:28](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useTransitionAnimation.ts#L28)
325+
[src/react/hooks/useTransitionAnimation.ts:28](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useTransitionAnimation.ts#L28)
326+
327+
___
328+
329+
### AnimationDefinition
330+
331+
Ƭ **AnimationDefinition**<`Args`\>: [keyframe: TypedKeyframe \| TypedKeyframe[] \| GetKeyframeFunction<Args\>, options?: AnimationOptions]
332+
333+
#### Type parameters
334+
335+
| Name |
336+
| :------ |
337+
| `Args` |
338+
339+
#### Defined in
340+
341+
[src/react/types/index.ts:12](https://github.com/inokawa/react-animatable/blob/f732265/src/react/types/index.ts#L12)
342+
343+
___
344+
345+
### ScrollTimelineAxis
346+
347+
Ƭ **ScrollTimelineAxis**: ``"block"`` \| ``"inline"`` \| ``"y"`` \| ``"x"``
348+
349+
#### Defined in
350+
351+
[src/react/types/index.ts:29](https://github.com/inokawa/react-animatable/blob/f732265/src/react/types/index.ts#L29)
352+
353+
___
354+
355+
### ViewTimelineInset
356+
357+
Ƭ **ViewTimelineInset**: ``"auto"`` \| `string` & {}
358+
359+
#### Defined in
360+
361+
[src/react/types/index.ts:31](https://github.com/inokawa/react-animatable/blob/f732265/src/react/types/index.ts#L31)

docs/interfaces/AnimationFunctionHandle.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ A wrapper of Web Animations API's [play](https://developer.mozilla.org/en-US/doc
5151

5252
#### Defined in
5353

54-
[src/react/hooks/useAnimation.ts:35](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L35)
54+
[src/react/hooks/useAnimation.ts:44](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L44)
5555

5656
___
5757

@@ -71,7 +71,7 @@ A wrapper of Web Animations API's [reverse](https://developer.mozilla.org/en-US/
7171

7272
#### Defined in
7373

74-
[src/react/hooks/useAnimation.ts:41](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L41)
74+
[src/react/hooks/useAnimation.ts:50](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L50)
7575

7676
___
7777

@@ -91,7 +91,7 @@ A wrapper of Web Animations API's [cancel](https://developer.mozilla.org/en-US/d
9191

9292
#### Defined in
9393

94-
[src/react/hooks/useAnimation.ts:45](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L45)
94+
[src/react/hooks/useAnimation.ts:54](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L54)
9595

9696
___
9797

@@ -111,7 +111,7 @@ A wrapper of Web Animations API's [finish](https://developer.mozilla.org/en-US/d
111111

112112
#### Defined in
113113

114-
[src/react/hooks/useAnimation.ts:49](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L49)
114+
[src/react/hooks/useAnimation.ts:58](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L58)
115115

116116
___
117117

@@ -131,7 +131,7 @@ A wrapper of Web Animations API's [pause](https://developer.mozilla.org/en-US/do
131131

132132
#### Defined in
133133

134-
[src/react/hooks/useAnimation.ts:53](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L53)
134+
[src/react/hooks/useAnimation.ts:62](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L62)
135135

136136
___
137137

@@ -159,7 +159,7 @@ If you pass function, you can get [endTime](https://developer.mozilla.org/en-US/
159159

160160
#### Defined in
161161

162-
[src/react/hooks/useAnimation.ts:59](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L59)
162+
[src/react/hooks/useAnimation.ts:68](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L68)
163163

164164
___
165165

@@ -187,7 +187,7 @@ If you pass function, you can get current [playbackRate](https://developer.mozil
187187

188188
#### Defined in
189189

190-
[src/react/hooks/useAnimation.ts:67](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L67)
190+
[src/react/hooks/useAnimation.ts:76](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L76)
191191

192192
___
193193

@@ -216,4 +216,4 @@ A getter of Promise that will be resolved in specified timing.
216216

217217
#### Defined in
218218

219-
[src/react/hooks/useAnimation.ts:76](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/react/hooks/useAnimation.ts#L76)
219+
[src/react/hooks/useAnimation.ts:85](https://github.com/inokawa/react-animatable/blob/f732265/src/react/hooks/useAnimation.ts#L85)

docs/interfaces/AnimationFunctionOptions.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ Extended [options of KeyframeEffect](https://developer.mozilla.org/en-US/docs/We
2929

3030
### easing
3131

32-
`Optional` **easing**: `string`
32+
`Optional` **easing**: [`TypedEasing`](../API.md#typedeasing)
3333

3434
#### Inherited from
3535

3636
[TypedKeyframeEffectOptions](TypedKeyframeEffectOptions.md).[easing](TypedKeyframeEffectOptions.md#easing)
3737

3838
#### Defined in
3939

40-
[src/core/waapi.ts:40](https://github.com/inokawa/react-animatable/blob/23c2c4a/src/core/waapi.ts#L40)
40+
[src/core/waapi.ts:41](https://github.com/inokawa/react-animatable/blob/f732265/src/core/waapi.ts#L41)
4141

4242
___
4343

0 commit comments

Comments
 (0)