https://github.com/useallfive/ani-friend
A tool that makes animations a breeze.
https://github.com/useallfive/ani-friend
Last synced: about 1 year ago
JSON representation
A tool that makes animations a breeze.
- Host: GitHub
- URL: https://github.com/useallfive/ani-friend
- Owner: UseAllFive
- License: mit
- Created: 2019-06-07T14:10:33.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:28:36.000Z (over 3 years ago)
- Last Synced: 2025-04-14T06:55:26.143Z (about 1 year ago)
- Language: JavaScript
- Size: 4.1 MB
- Stars: 2
- Watchers: 10
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
```
npm install --save ani-friend
```
# Animation Friend
This tool will reveal an area when in view and allow you to control
how the container and any children elements appear.
As the user scrolls, it can lazyload images when they’re at
one screen height lower.
There are built in animation presets, or you can build your own.
### Usage
```javascript
import { Ani } from 'ani-friend'
const ani = new Ani()
// If new elements that are animation groups get added dynamically,
// calling this will add any new elements with an ani attribute
ani.update()
```
```html
![]()
![]()
![]()
![]()
![]()
![]()
```
Add this to your styles in the head, so all elements are hidden prior to DOM loading:
```css
[ani],
[data-ani] {
opacity: 0;
}
```
### HTML Attributes
You may preface each attribute with `data-` if necessary.
- `ani`: Takes a string for the parent preset name
- `ani-in-view-trigger-percent`: attribute for ani parents. Decimal - when to reveal the group. When scrolling, a lower number will show the item sooner than higher numbers.
- `load-src`: add to image tags in lieu src attributes, and it will lazy load
- `ani-child`: Defines this node to be a child
- `ani-child-order`: you can sequence the order of nodes that come in
- If you leave `ani-child-order` blank, the el takes the dom order, but ranks lower than nodes that are set
- `ani-delay-speed`: in seconds, it gets multiplied by its order or index
- `ani-speed`: in seconds, the duration that the animation occurs in in
- `ani-move-distance`: in pixels, for x/y transforms on the fade preset
- `ani-preset`: Micro animations for individual objects.
- `basic-appear` comes with: `fade`, `wipe`, `zoom`, `text`, and `class`
- Then you may append a direction `-up`, `-down`, `-left`, `-right`; Zoom: `-in` and `-out`. Text: `-line-mask` and `-line-appear`.
- If you select class, you'll need to append a class name
- Example: `ani-preset="class-my-class-name"` — this will add `my-class-name` to the element's class list in lieu of an appear function.
- For zoom, the element must be in a wrapper with an `overflow: hidden` that will crop the target.
- For text, it will break the text in an element into lines so they can be individually animated.
- `ani-text-line-y-offset`: Positive or negative number to adjust the starting offset of each line of text.
- `ani-text-line-delay-speed`: Number to adjust the delay speed that each line appears at. It is multiplied by the line index.
- `ani-ease`: String for ease property - see [gsap ease visualizer](https://greensock.com/ease-visualizer). Example: `ani-ease="Power4.easeInOut"`.
### Example animation Group Action
```javascript
AniGroupActions['basic-appear'] = (el, children) => {
el.style.opacity = 1
el.style.transition = 'none'
children.forEach((item, index) => {
let preset = ''
if (item.hasAttribute('ani-preset')) {
preset = item.getAttribute('ani-preset')
}
const ani = new AniElement(item, index, preset)
ani.appear()
})
}
```