https://github.com/dmitriyakkerman/anime-in-viewport
Simple way for triggering Anime.js animations on scroll event
https://github.com/dmitriyakkerman/anime-in-viewport
animation animejs javascript
Last synced: 11 months ago
JSON representation
Simple way for triggering Anime.js animations on scroll event
- Host: GitHub
- URL: https://github.com/dmitriyakkerman/anime-in-viewport
- Owner: dmitriyakkerman
- Created: 2021-07-25T13:58:51.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-16T17:39:17.000Z (over 4 years ago)
- Last Synced: 2025-04-09T12:11:18.988Z (about 1 year ago)
- Topics: animation, animejs, javascript
- Language: JavaScript
- Homepage:
- Size: 304 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# anime-in-viewport
**Usage**
1.Connect Anime.js and anime-in-viewport scripts.
```js
```
2.Init your animation
```js
AnimeInViewport.init('.item', (el, i, l) => ({
translateY: ['100px', 0],
opacity: [0, 1],
easing: "easeOutExpo",
duration: 1000,
delay: () => i * 300
}), '0px', 0)
```
**Params**
##### `param1`
Target element.
*Type:* String
*Required:* true
##### `param2`
Function which should return the object of Anime.js properties. Accepts 3 arguments: current target element, index of current target element and length of target elements.
*Type:* Function
*Required:* true
##### `param3`
RootMargin. Native [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) parameter for margin around the target element.
*Type:* String
*Required:* `false`
*Default:* `0px`
##### `param4`
Threshold. Native [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) parameter which indicate at what percentage of the target's visibility the animation should be executed.
*Type:* Number
*Required:* `false`
*Default:* `0`