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" ... { // ==> 2. call usePositiveOffset in a function component const positiveOffset = ... }
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" ... { ... // ==> 2. call useSticky to create a new MotionValue. The first parameter MUST be a positive offset. const titleOffset = ... return <Scroll => // ==> 3. use titleOffset as a prop <Frame =>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" ... { ... // ==> 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 = ... return <Scroll => // ==> 3. use titleOffset as a prop <Frame =>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" ... { ... // ==> 2. call useTrigger to setup the trigger ... }
Special values
In ranges, the following special values are supported:
vh
: Viewport height, e.g.'100vh'
means 100% of viewport heightvw
: Viewport height, e.g.'50vw'
means 50% of viewport height
const titleOffset =
useSpecialValueRange
A hook that converts a range with special values into pixels.
const opacity =