react-awesome-reveal 5.0.0-next.4 → 5.0.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -24
- package/package.json +12 -9
- package/skills/migrating-from-v4/SKILL.md +23 -78
- package/dist/keyframes.d.ts +0 -1
- package/dist/keyframes.js +0 -1
package/README.md
CHANGED
|
@@ -1,30 +1,11 @@
|
|
|
1
1
|
# react-awesome-reveal
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://www.npmjs.com/package/react-awesome-reveal)
|
|
5
|
-
[](https://www.npmjs.com/package/react-awesome-reveal)
|
|
3
|
+
Version 5 of `react-awesome-reveal` re-exports `@awesome-reveal/react`. It gives `Reveal`, `Cascade`, `useReveal`, `useCascade` and their types, and it loads its stylesheet automatically.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
```tsx
|
|
6
|
+
import { Reveal } from "react-awesome-reveal";
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
| -------------------------------- | --------------------------------- |
|
|
11
|
-
| `react-awesome-reveal` | `@awesome-reveal/react` |
|
|
12
|
-
| `react-awesome-reveal/keyframes` | `@awesome-reveal/react/keyframes` |
|
|
13
|
-
|
|
14
|
-
Install `@awesome-reveal/react` in new projects:
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
pnpm add @awesome-reveal/react
|
|
8
|
+
<Reveal from="left">Hello</Reveal>;
|
|
18
9
|
```
|
|
19
10
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Version 5 is not compatible with v4. It has no effect components, such as `Fade` or `Slide`, and it does not use Emotion. Read [Migrating from v4](https://www.npmjs.com/package/@awesome-reveal/react#migrating-from-v4).
|
|
23
|
-
|
|
24
|
-
This package includes the `migrating-from-v4` agent skill, which helps a coding agent do the migration.
|
|
25
|
-
|
|
26
|
-
The v4 documentation is in the [README of `react-awesome-reveal@4.3.1`](https://github.com/awesome-reveal/awesome-reveal/blob/react-awesome-reveal%404.3.1/README.md).
|
|
27
|
-
|
|
28
|
-
## License
|
|
29
|
-
|
|
30
|
-
MIT
|
|
11
|
+
For the API and the migration from version 4, read the [React documentation](https://www.npmjs.com/package/@awesome-reveal/react). The package includes the `migrating-from-v4` agent skill. The license is MIT.
|
package/package.json
CHANGED
|
@@ -1,20 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-awesome-reveal",
|
|
3
|
-
"version": "5.0.0-next.
|
|
3
|
+
"version": "5.0.0-next.5",
|
|
4
4
|
"description": "Reveal-on-scroll animations for React. This package re-exports @awesome-reveal/react.",
|
|
5
5
|
"keywords": [
|
|
6
|
+
"animate-on-scroll",
|
|
6
7
|
"animation",
|
|
8
|
+
"fade-in",
|
|
7
9
|
"hooks",
|
|
8
10
|
"intersection-observer",
|
|
9
11
|
"react",
|
|
12
|
+
"react-component",
|
|
13
|
+
"react-hook",
|
|
10
14
|
"reveal",
|
|
15
|
+
"reveal-on-scroll",
|
|
11
16
|
"scroll",
|
|
17
|
+
"scroll-animation",
|
|
12
18
|
"scroll-reveal",
|
|
13
19
|
"typescript",
|
|
20
|
+
"viewport",
|
|
14
21
|
"waapi",
|
|
15
22
|
"web-animations"
|
|
16
23
|
],
|
|
17
|
-
"homepage": "https://awesome-reveal.
|
|
24
|
+
"homepage": "https://awesome-reveal.dev",
|
|
18
25
|
"bugs": {
|
|
19
26
|
"url": "https://github.com/awesome-reveal/awesome-reveal/issues"
|
|
20
27
|
},
|
|
@@ -47,30 +54,26 @@
|
|
|
47
54
|
"types": "./dist/index.d.ts",
|
|
48
55
|
"default": "./dist/index.js"
|
|
49
56
|
},
|
|
50
|
-
"./keyframes": {
|
|
51
|
-
"types": "./dist/keyframes.d.ts",
|
|
52
|
-
"default": "./dist/keyframes.js"
|
|
53
|
-
},
|
|
54
57
|
"./package.json": "./package.json"
|
|
55
58
|
},
|
|
56
59
|
"publishConfig": {
|
|
57
60
|
"access": "public"
|
|
58
61
|
},
|
|
59
62
|
"dependencies": {
|
|
60
|
-
"@awesome-reveal/react": "^1.0.0-next.
|
|
63
|
+
"@awesome-reveal/react": "^1.0.0-next.5"
|
|
61
64
|
},
|
|
62
65
|
"devDependencies": {
|
|
63
66
|
"@types/react": "^19.3.0",
|
|
64
67
|
"react": "^19.3.0"
|
|
65
68
|
},
|
|
66
69
|
"peerDependencies": {
|
|
67
|
-
"react": "
|
|
70
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
68
71
|
},
|
|
69
72
|
"engines": {
|
|
70
73
|
"node": ">=20.19.0"
|
|
71
74
|
},
|
|
72
75
|
"scripts": {
|
|
73
76
|
"build": "tsc --noEmit && vite build",
|
|
74
|
-
"check:package": "publint --strict && attw --pack . --profile esm-only"
|
|
77
|
+
"check:package": "tsc -p test/package && publint --strict && attw --pack . --profile esm-only"
|
|
75
78
|
}
|
|
76
79
|
}
|
|
@@ -1,95 +1,40 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: migrating-from-v4
|
|
3
|
-
description: Migrates
|
|
3
|
+
description: Migrates a React application from react-awesome-reveal v4 to the v5 API of @awesome-reveal/react, with native keyframes. Use when a project uses the v4 effect components or Emotion keyframes of react-awesome-reveal.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
# Migrate
|
|
6
|
+
# Migrate to v5
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Install `@awesome-reveal/react`, or upgrade `react-awesome-reveal` to version 5. If no other code uses Emotion, remove it. The project must use React 18 or 19.
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
2. Remove `@emotion/react`, unless the app uses it for other code.
|
|
12
|
-
3. Make sure that the app uses React 18 or later.
|
|
13
|
-
4. Change the imports. `Reveal` is a named export now. The keyframes come from `@awesome-reveal/react/keyframes`.
|
|
14
|
-
5. Replace each effect component with `Reveal` and a keyframes factory, as the component table shows.
|
|
15
|
-
6. Change the props, as the props table shows.
|
|
16
|
-
7. Check the behavior changes below in each place that you change.
|
|
17
|
-
8. Run the type check and the tests of the app. Fix the errors, and run them again until they pass.
|
|
10
|
+
Replace each effect component with `Reveal`, and set `from` to a side or a complete start state. `Reveal` is a named export: `import { Reveal } from "@awesome-reveal/react"`.
|
|
18
11
|
|
|
19
|
-
|
|
20
|
-
// v4
|
|
21
|
-
import { Fade } from "react-awesome-reveal";
|
|
22
|
-
<Fade direction="up" cascade damping={0.2} triggerOnce>
|
|
23
|
-
…
|
|
24
|
-
</Fade>;
|
|
25
|
-
```
|
|
12
|
+
`from` names the side where the element starts. The v4 `left` and `right` directions name that side too, but `up` and `down` name the movement, so `up` becomes `from="bottom"` and `down` becomes `from="top"`. For `big` or a diagonal direction, use a `from` object with `x` and `y`. For a complex effect, change the CSS animation into native keyframe objects, with an `offset` and an `easing` for each segment. The last keyframe must agree with the resting style of the element.
|
|
26
13
|
|
|
27
14
|
```tsx
|
|
28
|
-
// @awesome-reveal/react
|
|
29
15
|
import { Reveal } from "@awesome-reveal/react";
|
|
30
|
-
|
|
31
|
-
<Reveal
|
|
32
|
-
|
|
16
|
+
|
|
17
|
+
<Reveal from={{ opacity: 0 }}>Pure fade</Reveal>;
|
|
18
|
+
<Reveal from="left">Directional entrance</Reveal>;
|
|
19
|
+
<Reveal
|
|
20
|
+
keyframes={[
|
|
21
|
+
{ opacity: 0, transform: "scale(.8)" },
|
|
22
|
+
{ opacity: 1, transform: "scale(1)" },
|
|
23
|
+
]}
|
|
24
|
+
>
|
|
25
|
+
Native animation
|
|
33
26
|
</Reveal>;
|
|
34
27
|
```
|
|
35
28
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
In v4, `left` and `right` name the side where the element starts, but `up` and `down` name the movement. `slide` `direction` always names the movement, so only `left` and `right` swap.
|
|
39
|
-
|
|
40
|
-
| v4 | @awesome-reveal/react |
|
|
41
|
-
| ------------------------------ | ------------------------------------------------------------------------------------------------- |
|
|
42
|
-
| `import Reveal from "…"` | `import { Reveal } from "@awesome-reveal/react"` |
|
|
43
|
-
| `<Reveal>` with no `keyframes` | `slide({ direction: "right", distance: "100%" })` |
|
|
44
|
-
| `<Fade>` | `fade()` |
|
|
45
|
-
| `<Fade direction="up">` | `slide()`, or `slide({ distance: "100%" })` for the v4 distance |
|
|
46
|
-
| `<Fade direction="down">` | `slide({ direction: "down" })` |
|
|
47
|
-
| `<Fade direction="left">` | `slide({ direction: "right" })` |
|
|
48
|
-
| `<Fade direction="right">` | `slide({ direction: "left" })` |
|
|
49
|
-
| `<Fade direction="left" big>` | `slide({ direction: "right", distance: 2000 })` |
|
|
50
|
-
| `<Fade direction="top-left">` | `enter({ x: "-100%", y: "-100%" })` |
|
|
51
|
-
| `<Slide>` | `slide({ direction: "right", distance: "100%", opacity: 1 })` |
|
|
52
|
-
| `<Slide direction="up">` | `slide({ distance: "100%", opacity: 1 })` |
|
|
53
|
-
| `<Zoom>` | `scale({ from: 0.3 })`, a close match |
|
|
54
|
-
| `<Bounce>` | `pop({ from: 0.3 })`, or `scale({ from: 0.3, easing: spring({ bounce: 0.5 }) })` for more bounces |
|
|
55
|
-
| `<JackInTheBox>` | `pop({ from: 0.1 })`, with no rotation |
|
|
56
|
-
| `<Rotate>` | `enter({ rotate: -200 })` |
|
|
57
|
-
| `<Roll>` | `enter({ x: "-100%", rotate: -120 })` |
|
|
58
|
-
|
|
59
|
-
These have no replacement: exit animations (`reverse`), `Flip`, `Hinge`, `AttentionSeeker`, and the directional `Bounce`, `Zoom` and `Rotate` variants. To keep one, port its keyframes from Animate.css (see below).
|
|
60
|
-
|
|
61
|
-
## Props
|
|
62
|
-
|
|
63
|
-
| v4 | @awesome-reveal/react |
|
|
64
|
-
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
65
|
-
| `cascade` and `damping` | `stagger`, in milliseconds: `duration * damping`. The v4 defaults give `stagger={500}`. |
|
|
66
|
-
| `fraction` | `threshold` |
|
|
67
|
-
| `triggerOnce` | `once`. The default is `true` now. Set `once={false}` where v4 had no `triggerOnce`. |
|
|
68
|
-
| `duration` (default `1000`) | `duration` (default `600`). Set `duration={1000}` to keep the v4 duration. |
|
|
69
|
-
| `ease` timing, with no prop | The `easing` option of each factory, default `cubic-bezier(0.22, 1, 0.36, 1)`. Set `easing: "ease"` to keep the v4 motion. |
|
|
70
|
-
| `className`, `style` | They apply to the one element that `Reveal` renders. v4 applied them to the `div` of each child. To keep that, put them on each child. |
|
|
71
|
-
| `childClassName`, `childStyle` | Style the children directly. |
|
|
72
|
-
| `onVisibilityChange` | `useReveal` with `once: false`, and its `revealed` value in an effect. With the default `once: true`, `revealed` never goes back to `false`. v4 called the callback for each child, so use one `useReveal` for each child. |
|
|
73
|
-
| Emotion `keyframes` | `defineKeyframes` or a keyframes array |
|
|
74
|
-
|
|
75
|
-
## Port an Animate.css animation
|
|
29
|
+
The default entrance starts transparent and 24px below the resting position. It takes 600 ms and plays one time. A `from` object replaces the start state, so it gets no default fade and no offset. The package loads its CSS automatically.
|
|
76
30
|
|
|
77
|
-
|
|
31
|
+
Check these behavior changes, because the type check does not find them:
|
|
78
32
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
5. Sort the keyframes by offset. `element.animate` throws a `TypeError` when an offset is smaller than the offset before it.
|
|
84
|
-
6. Write each CSS keyframe as an object, with properties in camelCase.
|
|
85
|
-
7. Write `from` as `offset: 0`, `to` as `offset: 1`, and `40%` as `offset: 0.4`.
|
|
86
|
-
8. Write the timing function of each keyframe except the last one as `easing`. Web Animations eases a keyframe with no `easing` linearly.
|
|
33
|
+
- A v4 `<Reveal>` with no `keyframes` slid in from the left by 100%. Now it moves up 24px. For the v4 motion, use `from={{ opacity: 0, x: "-100%" }}`.
|
|
34
|
+
- The v4 duration was 1000 ms. Set `duration={1000}` to keep it. The easing is fixed. To change it, use native keyframes.
|
|
35
|
+
- `Reveal` renders one element around its children, and `as` sets its tag. v4 wrapped each element child in a `div`, and animated each `li` of a list child. `className` and `style` now apply to the one element. Style the children directly instead of `childClassName` and `childStyle`.
|
|
36
|
+
- One observer watches the whole `Reveal`, so all the children reveal together.
|
|
87
37
|
|
|
88
|
-
|
|
38
|
+
For a long list, use one reveal for each item. Replace the v4 `cascade` prop with the `Cascade` component, which animates its direct element children in sequence. For a v4 cascade around a list, render the list with `Cascade`, for example `<Cascade as="ul">`. Set `interval` to the v4 `duration * damping`, in milliseconds. `Cascade` does not split text. If you need text spans, write them yourself. Do not make screen readers read the same text two times.
|
|
89
39
|
|
|
90
|
-
|
|
91
|
-
- `Reveal` renders one element (`as`, `div` by default) around all its children. v4 rendered one `div` for each child. Check the CSS that targets these wrappers.
|
|
92
|
-
- v4 observed each child separately. One observer now watches the whole `Reveal`, and all children reveal together, also children below the fold. Split a long list into several `Reveal` elements, or use `useReveal` for each item.
|
|
93
|
-
- Use `stagger` to animate the children one after the other.
|
|
94
|
-
- Lists, fragments and text have no special handling. For a list, use `as="ul"` with `stagger`.
|
|
95
|
-
- Animations do not stay applied after they finish, so a transformed element no longer breaks `position: fixed` children or `z-index`.
|
|
40
|
+
Replace `fraction` with `threshold`, and use `when` for manual control. Replace `onVisibilityChange` with `onReveal`, which runs one time for each reveal. `delay` and the exit animations (`reverse`) have no replacement. Remove `triggerOnce`. In v4 the entrance played each time by default, but now it plays one time. To play it again, set `when` to `false`, then to `true`. Use `useReveal` for an element that you render. After the migration, check the refs, hydration, reduced motion and the teardown.
|
package/dist/keyframes.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@awesome-reveal/react/keyframes';
|
package/dist/keyframes.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "@awesome-reveal/react/keyframes";
|