);
```
# Animation and Transition Property
`Animation` is use when the className is animate by css property animation and keyframe.
`Transition` is use when the className is animated by css property transition.
The datatypes with "*" means it is required.
|PROPERTY |DATATYPES |DEFAULT |DESCRIPTION|
|-------------|---------------|-------------|-------------|
| in | boolean* | | it indicates whether the children will enter or exit |
| children | element\|component * | | it is the element you want to animate. to make this work in components, it is required that the component has a property assignable to `className` for toggling animation and if `stayMountedWhenExited` is `true` it required assignable property `style` to use display |
| className | string | | it is the class name that will be assigned to the children component or element|
| timing | number\|millsecond| 1000 | it is the timing of the animation will be transitioned |
| suffix | { enter: string*, exit: string* } | { enter: '-in', exit: '-out' } | it is the suffix for className. basically if the className assigned is `fade` then when the component or element entering in. it will assign a className `fade-in` in the children, same way in exit. and for additional idea. suffix can be use when the enter and exit className are not uniformed ex. `fade-in` and `slide-out`. To make it happen just don't assign anything in className and assign the class names in suffix ex. `{ enter:"fade-in", exit:"slide-out" }` |
| stayMountedWhenExited | boolean | false | it is determined whether the component or element will stay mounted or unmounted from DOM when animation is exited. if it is `true` it will use `display` `block` and `none` from entering and exiting of the element|
| allowRef | boolean | false | if true it will pass the animated/children node element on any event below, if the animated/children is component make sure it is `React.forwardRef` component. so it can get the node|
| onEnter | function | | it is invoke when the animation is started to enter |
| onEntering | function | | it is invoke when the animation is entering |
| onEntered | function | | it is invoke when the animation is fully entered |
| onExit | function | | it is invoke when the animation is started to exit |
| onExiting | function | | it is invoke when the animation is exiting |
| onExited | function | | it is invoke when the animation is fully exited |
| onMounted | function | | it is invoke when the component is mounted |
## useScrollPosition Usage
It is use to determine the scroll position specially when spying elements.
[](https://codesandbox.io/s/focused-shtern-mwbxr?fontsize=14&hidenavigation=1&theme=dark)
```js
function Callback({ current, previous}, { isScrollDown, isScrollUp, isInitial, main, screen, defaultSpy}) {
// make your own algorithm using the provided
...
}
```
or use `defaultSpy` for "ready to use" algorithm
```js
function Callback(positions, {defaultSpy, ...provided} ) {
const initial = {
target: document.getElementById("target"), // or you can use hooks like React.useRef() to get the element
extra_top: 100, // the added extra_top to enter the target scrolltop early
onEntered: () => {
...Do something when entered the target scroll top
},
onExited: () => {
...Do something when exited the target scroll top
}
}
defaultSpy(initial, positions, provided)
}
```
```js
useScrollPossition(Callback, scrolled)
```
# useScrollPossition Parameters
|PROPERTY |DATATYPES |DEFAULT |DESCRIPTION|
|-------------|---------------|-------------|-------------|
| Callback | function | | it is the current position of the scroll top |
| scrolled | element\|string| window | it is the element to be assigned onscroll, you can assign css styled selector ex. `#section-scroll`|
## Callback First Argument Properties
|PROPERTY |DATATYPES |PROVIDE |DESCRIPTION|
|-------------|---------------|-------------|-------------|
| current | object |{ x: number, y: number} | it is the current position of the scroll top |
| previous | object |{ x: number, y: number} | it is the previous position of the scroll top |
## Callback Second Argument Properties
|PROPERTY |DATATYPES |PROVIDE |DESCRIPTION|
|-------------|---------------|-------------|-------------|
| isScrollDown | boolean | true\|false | it is to determine if the user is scrolling downward |
| isScrollUp | boolean | true\|false | it is to determine if the user is scrolling upward |
| isInitial | boolean | true\|false | it is the initial state when the user is not scrolling yet |
| main | element | element | it is the element being scrolled |
| screen | object | { innerHeight, innerWidth} |it is the dimension of the screen
| defaultSpy | function | function | it is a "ready to use" algorithm which is provided for spying the target elements, it is up to you if you want to use this algorithm or make your own |
## License
MIT Licensed. Copyright (c) fernando tabamo jr(Mytabworks) 2020.
---
_Source: https://npm.io/package/myt-react-snippets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._