react-awesome-reveal 5.0.0-next.1 → 5.0.0-next.10

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.
Files changed (7) hide show
  1. package/README.md +8 -22
  2. package/dist/reveal.css +24 -0
  3. package/dist/reveal.css.d.ts +1 -0
  4. package/package.json +18 -9
  5. package/skills/migrating-from-v4/SKILL.md +29 -75
  6. package/dist/keyframes.d.ts +0 -1
  7. package/dist/keyframes.js +0 -1
package/README.md CHANGED
@@ -1,30 +1,16 @@
1
1
  # react-awesome-reveal
2
2
 
3
- [![Version](https://badgen.net/npm/v/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal)
4
- [![Downloads](https://badgen.net/npm/dt/react-awesome-reveal)](https://www.npmjs.com/package/react-awesome-reveal)
5
- [![License](https://badgen.net/npm/license/react-awesome-reveal)](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
- React Awesome Reveal is now [`@awesome-reveal/react`](https://www.npmjs.com/package/@awesome-reveal/react). Version 5 of this package re-exports it, with the same entry points:
5
+ ```tsx
6
+ import { Reveal } from "react-awesome-reveal";
8
7
 
9
- | Import path | Same as |
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
- ## Migrating from v4
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).
11
+ Two setups need a step for the stylesheet:
27
12
 
28
- ## License
13
+ - In an Astro island, import `react-awesome-reveal/reveal.css` in the page or in the layout that renders the island.
14
+ - In the Next.js Pages Router with webpack, add `@awesome-reveal/react` to `transpilePackages` in the Next.js config. That package imports the stylesheet.
29
15
 
30
- MIT
16
+ 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/dist/reveal.css ADDED
@@ -0,0 +1,24 @@
1
+ /* The hold ends, so markup that no script attaches shows again. */
2
+ @media screen and (prefers-reduced-motion: no-preference) {
3
+ [data-awesome-reveal="hidden"],
4
+ [data-awesome-reveal="cascade"] > * {
5
+ animation: awesome-reveal-hold 5s !important;
6
+ }
7
+ [data-awesome-reveal="hidden"][data-awesome-reveal-attached],
8
+ [data-awesome-reveal="cascade"][data-awesome-reveal-attached] > * {
9
+ opacity: 0 !important;
10
+ }
11
+ }
12
+ /* A separate query, so browsers without the `scripting` feature still hide. */
13
+ @media (scripting: none) {
14
+ [data-awesome-reveal="hidden"],
15
+ [data-awesome-reveal="cascade"] > * {
16
+ animation: none !important;
17
+ }
18
+ }
19
+ @keyframes awesome-reveal-hold {
20
+ from,
21
+ to {
22
+ opacity: 0;
23
+ }
24
+ }
package/dist/reveal.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,20 +1,27 @@
1
1
  {
2
2
  "name": "react-awesome-reveal",
3
- "version": "5.0.0-next.1",
3
+ "version": "5.0.0-next.10",
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.morello.dev",
24
+ "homepage": "https://awesome-reveal.dev",
18
25
  "bugs": {
19
26
  "url": "https://github.com/awesome-reveal/awesome-reveal/issues"
20
27
  },
@@ -40,16 +47,18 @@
40
47
  "skills"
41
48
  ],
42
49
  "type": "module",
43
- "sideEffects": false,
50
+ "sideEffects": [
51
+ "*.css"
52
+ ],
44
53
  "types": "dist/index.d.ts",
45
54
  "exports": {
46
55
  ".": {
47
56
  "types": "./dist/index.d.ts",
48
57
  "default": "./dist/index.js"
49
58
  },
50
- "./keyframes": {
51
- "types": "./dist/keyframes.d.ts",
52
- "default": "./dist/keyframes.js"
59
+ "./reveal.css": {
60
+ "types": "./dist/reveal.css.d.ts",
61
+ "default": "./dist/reveal.css"
53
62
  },
54
63
  "./package.json": "./package.json"
55
64
  },
@@ -57,20 +66,20 @@
57
66
  "access": "public"
58
67
  },
59
68
  "dependencies": {
60
- "@awesome-reveal/react": "^1.0.0-next.1"
69
+ "@awesome-reveal/react": "^1.0.0-next.10"
61
70
  },
62
71
  "devDependencies": {
63
72
  "@types/react": "^19.3.0",
64
73
  "react": "^19.3.0"
65
74
  },
66
75
  "peerDependencies": {
67
- "react": ">=18.0.0"
76
+ "react": "^18.0.0 || ^19.0.0"
68
77
  },
69
78
  "engines": {
70
79
  "node": ">=20.19.0"
71
80
  },
72
81
  "scripts": {
73
82
  "build": "tsc --noEmit && vite build",
74
- "check:package": "publint --strict && attw --pack . --profile esm-only"
83
+ "check:package": "tsc -p test/package && publint --strict && attw --pack . --profile esm-only"
75
84
  }
76
85
  }
package/skills/migrating-from-v4/SKILL.md CHANGED
@@ -1,95 +1,49 @@
1
1
  ---
2
2
  name: migrating-from-v4
3
- description: Migrates code from react-awesome-reveal v4 (Fade, Slide, Zoom, Bounce, cascade, triggerOnce, Emotion keyframes) to @awesome-reveal/react. Use when code imports react-awesome-reveal 4.x or its effect components, or when the user upgrades react-awesome-reveal to v5.
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
+ license: MIT
5
+ compatibility: Requires @awesome-reveal/react and React 18 or 19.
4
6
  ---
5
7
 
6
- # Migrate from react-awesome-reveal v4
8
+ # Migrate to v5
7
9
 
8
- ## Steps
10
+ 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
11
 
10
- 1. Replace the `react-awesome-reveal` dependency with `@awesome-reveal/react`.
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.
12
+ 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"`. With `react-awesome-reveal` 5, you can keep the `react-awesome-reveal` import path.
18
13
 
19
- ```tsx
20
- // v4
21
- import { Fade } from "react-awesome-reveal";
22
- <Fade direction="up" cascade damping={0.2} triggerOnce>
23
- …
24
- </Fade>;
25
- ```
14
+ `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
15
 
27
16
  ```tsx
28
- // @awesome-reveal/react
29
17
  import { Reveal } from "@awesome-reveal/react";
30
- import { slide } from "@awesome-reveal/react/keyframes";
31
- <Reveal keyframes={slide({ distance: "100%", easing: "ease" })} duration={1000} stagger={200}>
32
- …
18
+
19
+ <Reveal from={{ opacity: 0 }}>Pure fade</Reveal>;
20
+ <Reveal from="left">Directional entrance</Reveal>;
21
+ <Reveal
22
+ keyframes={[
23
+ { opacity: 0, transform: "scale(.8)" },
24
+ { opacity: 1, transform: "scale(1)" },
25
+ ]}
26
+ >
27
+ Native animation
33
28
  </Reveal>;
34
29
  ```
35
30
 
36
- ## Components
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).
31
+ 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. Two setups need a step:
60
32
 
61
- ## Props
33
+ - In an Astro island, import `reveal.css` from the package that you install in the page or the layout: `react-awesome-reveal/reveal.css` or `@awesome-reveal/react/reveal.css`.
34
+ - In the Next.js Pages Router with webpack, add `"@awesome-reveal/react"` to `transpilePackages`. Add it also when you install only `react-awesome-reveal`.
62
35
 
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 |
36
+ Check these behavior changes, because the type check does not find them:
74
37
 
75
- ## Port an Animate.css animation
38
+ - A v4 `<Reveal>` with no `keyframes` faded in from 100% of its width to the left. Now it fades in and moves up 24px. For the v4 motion, use `from={{ opacity: 0, x: "-100%" }}`.
39
+ - The v4 duration was 1000 ms. Set `duration={1000}` to keep it. The easing is fixed. To change it, use native keyframes.
40
+ - `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`.
41
+ - One observer watches the whole `Reveal`, so all the children reveal together.
76
42
 
77
- Copy the keyframes from the Animate.css source, and convert them to a keyframes array:
43
+ 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.
78
44
 
79
- 1. Split grouped selectors such as `from, 20%, 40%` into one keyframe for each offset.
80
- 2. Give each keyframe a timing function: its own `animation-timing-function`, or else the `animation-timing-function` of the Animate.css class. The default is `ease`.
81
- 3. Merge the keyframes that have the same offset and the same timing function. When two of them set the same property, keep the later value.
82
- 4. Remove the keyframes that set only a timing function. Browsers ignore them, so v4 did not show their easing.
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.
45
+ `Cascade` does not split text. If you need text spans, write them yourself. Do not make screen readers read the same text two times.
87
46
 
88
- ## Behavior changes
47
+ Replace `fraction` with `threshold`, and use `when` for manual control. Replace `onVisibilityChange` with `onReveal`, which gets the element one time for each reveal. Keep `delay`. It is in milliseconds, and in a cascade it moves the start of the whole sequence. The exit animations (`reverse`) have no replacement.
89
48
 
90
- - A `<Reveal>` with no `keyframes` now plays `slide()`: it moves up 24px. v4 slid in from the left by 100%. The type check does not find these elements, so search the code for `<Reveal` with no `keyframes`.
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`.
49
+ 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";