scroll-animations-js
v1.0.12
<p align="center"> <a href="https://scroll-animations-js-web.vercel.app/"> <img src="https://i.imgur.com/1eO3TpN.png" width="900"/> </a> </p>
0/weekUpdated 2 years agoMITUnpacked: 14.8 KB
Published by jwun95
npm install scroll-animations-js
> Scroll-Animations-JS is a powerful scroll animation library for React.js, Vue.js and Vanilla-JavaScript.
Features
- 11 powerful animations
- Supports Vanilla JavaScript, React, and Vue
- Support TypeScript
- Supports all versions of React and Vue
- About 378KB min+gzip
- Focus on usability and performance without _over-animating_ stuff
Documentation
The documentation is in the docs directory, it serves as the demo as well.
Browse online documentation here.
NPM
https://www.npmjs.com/package/scroll-animations-js
🛫 Quick start
#### Installation
``bash`
npm install scroll-animations-js
or
`bash`
yarn add scroll-animations-js
#### Link styles
`js`
#### Add scripts
`js`
🤔 How to use it?
- React
`js
import SA from 'scroll-animations-js';
import 'scroll-animations-js/dist/css/index.min.css';
function App() {
useEffect(() => SA.init(), []); // initialize scroll-animations-js
return
; // use it}
`
- HTML
js
`- Vue.js
1. Import package in your code.
js
import Animation from 'scroll-animations-js/dist/vue.js';
import 'scroll-animations-js/dist/css/index.min.css';
`2. Add the scroll-animations-js as a plugin to Vue
js
Vue.use(Animation, {
// you can add your options
delay: 3000,
duration: 3000,
intersectionObserverOptions: { threshold: 0, root: null, rootMargin: '0px' },
});
`3. Just add scroll-animations-js in your 'vue' file
js
`- Nuxt.js
plugins/scroll-animation.js
js
import Vue from 'vue';
import Animation from 'scroll-animations-js/dist/vue.js';
import 'scroll-animations-js/dist/css/index.min.css';Vue.use(Animation, {
// you can add custom options
delay: 3000,
duration: 3000,
intersectionObserverOptions: { threshold: 0, root: null, rootMargin: '0px' },
});
`nuxt.config.js
js
...
plugins: [
{ src: '~/plugins/scroll-animation', ssr: false },
],
...
`js
`👀 Advanced settings
These settings can be set both on certain elements, or as default while initializing script (in options object)
| Attribute | Description | Step | Default value | Range |
| ----------- | -------------------------- | ---- | ------------- | ------------ |
| sa-duration | Duration of animation (ms) | 100 | 500 | 0 ~ 5000(ms) |
| sa-delay | Delay of animation (ms) | 100 | 0 | 0 ~ 5000(ms) |
If you use fade animation, you can customizing fade distance.
Caution : If
option value is out of range of view-port than animation will not work!
| Attribute | Description | Step | Default value | Range |
| --------- | ----------- | -------- | --- | --- |
| sa-fade-distance | Far distance from element (px) | 100 | 200 | 100~1000(px) |If you use scale animation, you can customizing scaling.
You can't use
sa-scale-x or sa-scale-y with sa-scale.
| Attribute | Description | Step | Default value | Range |
| --------- | ----------- | -------- | --- | --- |
| sa-scale-x | Scale to x-axis | 0.1 | 1.1 | 1.1 ~ 3.0 |
| sa-scale-y | Scale to y-axis | 0.1 | 1.1 | 1.1 ~ 3.0 |
| sa-scale | Scale transformation | 0.1 | 1.1 | 1.1 ~ 3.0 |Example:
`js
div class="sa-animation sa-scale" sa-delay="300" sa-fade-distance="1000">`
👏 Global Setting
If you don't want to change setting for each element separately, you can change it globally.
You can change global animation delay, duration and Intersection Observer options
To do this, pass options object to init() function, like so:
js
``🌞 Animations
There are serveral predefined animations you can use already:
Fade animations:
- fade
- sa-fade-down
- sa-fade-up
- sa-fade-right
- sa-fade-left
- sa-fade-up-right
- sa-fade-up-left
- sa-fade-down-right
- sa-fade-down-left
- scale
- sa-scale
Contributors :heart_eyes:
 jwun95 |  Bora Choi |  developerjhp |  Hyebin |  kjhg478 |  Woobba |  ww8007 |
License
Copyright 2022 NICE MEETING PEOPLE
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.