import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Hooks/useFancyAnimationScroller" />

# useFancyAnimationScroller

Custom hook that will adjust the height of a given element in relation to the scrolling amount of a container.

How much the height grows or shrinks is calculated using a exponential decay curve, so that the height of the scrollable container is taken into account and you don't weird a weird effect (like continuing scaling up the height during the whole scroll movement of a very large scrollable container).

> Uses `requestAnimationFrame` under the hood to make it performant.

### Parameters

Object with the following keys:

- `container:Node|Ref`: Either a node or ref from the container that wraps the scrollable element and the node to apply the effect to
- `nodeThatScrollsSelector:String`: Valid selector of the scrollable element. If using `<ScrollableContainer />` with "simple-bar" the selector for the scrollable node is:`.simplebar-content-wrapper`.
- `nodeToAnimateSelector:String`: Valid selector of the element to apply the height animation to, usually the fixed header.
- `topReachedClassNames:String|[String]`: A classname to add or remove as the "target" above (ie the header) is reached (scrollable content all the way to the top). Useful if you want to animate the contents of the header somehow. Default: `'at-the-top'`
- `nodeToAnimateFinalHeight:Number`: The final height of the target (header) in pixels.
- `decayRates:[decayUp:Number, decayDown:Number]`: These rates affect how quickly the animation happens as you scroll up or down (the larger the number the quickest). Default: `[0.01, 0.015]`

### Return value

The hook returns a `handleScroll` function to bind to the `onScroll` event of the scrollable container.

### Example

```jsx
import useFancyAnimationScroller from '@helpscout/hsds-react/hooks/useFancyAnimationScroller'

function MyComponent() {
  const containerRef = useRef(null)
  const [handleScroll] = useFancyAnimationScroller({
    container: containerRef,
    decayRates: [0.01, 0.015],
    nodeToAnimateFinalHeight: 40,
    nodeToAnimateSelector: '.top-header',
    nodeThatScrollsSelector: '.simplebar-content-wrapper',
    topReachedClassNames: 'at-the-top',
  })

  return (
    <ScrollableContainer
      ref={containerRef}
      onScroll={handleScroll}
      header={
        <HeaderUI className="top-header">
          <h1>Heading</h1>
        </HeaderUI>
      }
      body={<div>Some cool content</div>}
      withSimpleBar
    />
  )
}
```
