up

use-parallax

React Hooks to support scroll interactions based on the Framer Motion library

Showing:

Popularity

Downloads/wk

22

GitHub Stars

27

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

26.4KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

React Parallax

Readme

useParallax

Functions usePositiveOffset, useSticky, useSpeed and useTrigger are custom hook that I wrote to make it easier to create common parallax effect such as sticky headers.

usePositiveOffset

Description

Convert a negative offset MotionValue, that comes with contentOffsetX and contentOffsetY props of Scroll, to a positive one.

Usage

    // ==> 1. import it
    import { usePositiveOffset } from "./useParallax"
    ...
    function App() {
      // ==> 2. call usePositiveOffset in a function component
      const positiveOffset = usePositiveOffset(offset)
      ...
    }

useSticky

Description

Returns a MotionValue which can be used to make an item sticky when the Scroll is scrolled into specific ranges.

Usage

    // ==> 1. import it
    import { useSticky } from "./useParallax"
    ...
    
    function App() {
      ...
      // ==> 2. call useSticky to create a new MotionValue. The first parameter MUST be a positive offset.
      const titleOffset = useSticky(positiveOffset, [200, 400], [500, 700], [900, 1200])
      ...
      return (
        <Scroll contentOffsetY={offset}>
          // ==> 3. use titleOffset as a prop
          <Frame y={titleOffset}>Title</Frame>
          ...
        </Scroll>
      )
    }

In the code above, the title will be sticky when the list is scrolled into three ranges. When the list is scrolled outside of these ranges, the title will scroll with the rest of list normally.

useSpeed

Description

Returns a MotionValue which can be used to make an item move at a different speed when the Scroll is scrolled into specified ranges.

Usage

    // ==> 1. import it
    import { useSpeed } from "./useParallax"
    ...
    
    function App() {
      ...
      // ==> 2. call useSpeed to create a new MotionValue. 
      // The first parameter MUST be a positive offset. 
      // The following parameters are range-speed pairs.
      const titleOffset = useSpeed(positiveOffset, 
        [0, 200 ], 1, // speed > 0: the item moves faster than the scroll speed
        [200, 400], 0, // speed = 0: the item scrolls at the same speed as other items
        [500, 700], -0.5, // -1 < speed < 0: the item moves slower than scroll speed
        [900, 1200], -1, // speed = -1: the item is sticky
        [1200, 1500], -2 // speed < -1: the item moves in the opposite direction than the scrolling
      )
      ...
      return (
        <Scroll contentOffsetY={offset}>
          // ==> 3. use titleOffset as a prop
          <Frame y={titleOffset}>Title</Frame>
          ...
        </Scroll>
      )
    }

useTrigger

Description

Trigger something, e.g. an animation, when scrolling into the specified range

Usage

    // ==> 1. import it
    import { useTrigger } from "./useParallax"
    ...
    
    function App() {
      ...
      // ==> 2. call useTrigger to setup the trigger
      useTrigger(
        positiveOffset, // The first parameter MUST be a positive offset. 
        [200, 300], // Trigger range
        // This function will be called only once per scroll direction.
        //   direction > 0: scrolling up/left (normal scroll)
        //   direction < 0: scrolling down/right
        function(direction) {
          if (direction > 0) anim.start({ rotate: 180 })
          else anim.start({ rotate: 0 })
        }
      )
      ...
    }

Special values

In ranges, the following special values are supported:

  • vh: Viewport height, e.g. '100vh' means 100% of viewport height
  • vw: Viewport height, e.g. '50vw' means 50% of viewport height
const titleOffset = useSticky(positiveOffset, [0, '50vh'], ['60vh', 2000])

useSpecialValueRange

A hook that converts a range with special values into pixels.

const opacity = useTransform(useSpecialValueRange(['10vh', '50vh']), [0, 1])

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial