react-awesome-reveal
Advanced tools
react-awesome-reveal - npm Package Compare versions
Comparing version 2.0.0-beta.0 to 2.0.1
@@ -7,7 +7,7 @@ /// <reference types="react" /> | ||
| export declare type Delay = '1s' | '2s' | '3s' | '4s' | '5s' | number | undefined; | ||
| export declare type Speed = 'slower' | 'slow' | 'fast' | 'faster' | number | undefined; | ||
| export declare type Duration = 'slower' | 'slow' | 'fast' | 'faster' | number | undefined; | ||
| export interface CommonProps { | ||
| delay?: Delay; | ||
| duration?: Duration; | ||
| fraction?: number; | ||
| speed?: Speed; | ||
| triggerOnce?: boolean; | ||
@@ -14,0 +14,0 @@ className?: string; |
| { | ||
| "name": "react-awesome-reveal", | ||
| "description": "React components to add reveal animations using Intersection Observer API and CSS Animations.", | ||
| "version": "2.0.0-beta.0", | ||
| "version": "2.0.1", | ||
| "license": "MIT", | ||
@@ -6,0 +6,0 @@ "author": "Dennis Morello <dennismorello@gmail.com>", |
@@ -9,3 +9,3 @@ # React Awesome Reveal | ||
| [React Awesome Reveal](https://github.com/dennismorello/react-awesome-reveal) is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are provided by [Animate.css](https://github.com/daneden/animate.css) to benefit from hardware acceleration. | ||
| [React Awesome Reveal](https://github.com/dennismorello/react-awesome-reveal) is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by [Animate.css](https://github.com/daneden/animate.css) to benefit from hardware acceleration. | ||
@@ -21,2 +21,3 @@ ## Table Of Contents | ||
| - [Chaining Multiple Animations](#chaining-multiple-animations) | ||
| - [Version 1.x](#version-1.x) | ||
| - [License](#license) | ||
@@ -28,3 +29,3 @@ | ||
| - 🏷 **TypeScript support** - It is written in TypeScript to make it easier and faster to use the library | ||
| - 🍃 **Lightweight** - Very little footprint on your project ([~1kB gzipped](https://bundlephobia.com/result?p=react-awesome-reveal)) | ||
| - 🍃 **Lightweight** - Very little footprint on your project ([~1kB gzipped](https://bundlephobia.com/result?p=react-awesome-reveal)) and no other dependencies are required | ||
| - ⚙️ **Uses native APIs** - Intersection Observer and CSS Animations are now supported by all major browsers | ||
@@ -36,3 +37,3 @@ - 🚀 **Fast** - Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration | ||
| You can find a stress-test demo [here](https://react-awesome-reveal.morello.dev). | ||
| You can find a demo website [here](https://react-awesome-reveal.morello.dev). | ||
@@ -53,13 +54,2 @@ ## Installation | ||
| You must also include [Animated.css](https://daneden.github.io/animate.css/) in your HTML file: | ||
| ```html | ||
| <head> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" | ||
| /> | ||
| </head> | ||
| ``` | ||
| ## Quick Start | ||
@@ -91,4 +81,4 @@ | ||
| | `delay` | Milliseconds to wait before the animation starts | `"1s"`, `"2s"`, `"3s"`, `"4s"`, `"5s"` or a `number` in milliseconds | `undefined` | | ||
| | `duration` | The animation duration | `"slower"` (3s), `"slow"` (2s), `"fast"` (800ms), `"faster"` (500ms) or a `number` in milliseconds | `1000` | | ||
| | `fraction` | How much an element should be in viewport before the animation is triggered | `number` between `0` and `1` | `0` | | ||
| | `speed` | Affects the animation duration | `"slower"` (3s), `"slow"` (2s), `"fast"` (800ms), `"faster"` (500ms) or a `number` in milliseconds | `1000` | | ||
| | `triggerOnce` | Specifies if the animation should run only once or everytime an element enters/exits/re-enters the viewport | `true` or `false` | `false` | | ||
@@ -126,4 +116,19 @@ | `className` | Class names to add to the wrapper element (e.g. to specify custom animations) | `string` value | `undefined` | | ||
| ## Version 1.x | ||
| Version 1.x required to manually include [Animate.css](https://github.com/daneden/animate.css) in your HTML file(s): | ||
| ```html | ||
| <head> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" | ||
| /> | ||
| </head> | ||
| ``` | ||
| Moreover, the `duration` property was called `speed`. | ||
| ## License | ||
| Project source code is licensed under the MIT license. You are free to fork this repository, edit the code, share and use it both for non-commercial and commercial purposes. |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.29%
289293
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by4.07%
128
Worsened metrics
- Lines of code
- decreased by-0.11%
1842