A scrollable container intended to wrap your scrollable content.
Often you will want this container to occupy the full size of the viewport, though it can be any width/height.
Renders a div internally and accepts all props that a standard motion.div would.
Specifies the scroll direction of the container.
Throttle duration in milliseconds used to throttle scroll events which helps prevent animation interruptions.
You may wish to set this to 0 if animations are too sluggish/choppy for your liking. Default value is 90.
Used to partition scrollable content and help you identify important keyframes. Sections perform layout measurements when they detect a change in their dimensions and then notify animations.
Because sections monitor their dimensions, their heights are allowed to change dynamically. This means for example that a section with height: auto will be able to adapt to changes to its content that cause the section to grow/shrink.
Renders a div internally and accepts all props that a standard motion.div would.
A container used to animate its content according to the current scroll position.
Renders a div internally and accepts all props that a standard motion.div would.
Can be either a function that returns a keyframes object or a keyframes object itself.
A keyframes object has the following form, where each key represents a scroll offset as a number of pixels and each value represents the transformations that should be applied to the item when the user has scrolled the specified number of pixels.
One thing to note is that scrollex restricts the properties which we can animate via keyframes for performance reasons.
transform and opacity are widely known to be the safest properties to animate.
Scrollex also permits the animation of color and backgroundColor (see example).
To better understand how keyframes work, consider the following example.
The keyframes above dictate that once the user has scrolled down 200 pixels from the top of the container
then each heading should have a rotation of 180deg applied.
If instead we pass a function to the keyframes prop (which we typcially will), then we'll have access to layout helpers that can help us calculate important keyframes.
When passing a function to the keyframes prop, the function will be invoked with the following helpers.
Internally each property (eg: translateX, rotateZ, scale) has an associated spring that controls its motion.
The springs prop accepts a SpringConfigs object which allows us to control the characteristics of these springs.
SpringConfigs objects should have the following form.
The spring defaults are as follows.
The data prop allows us to pass through custom variables to the keyframes function.
One of the most practical uses of this is to pass array indexes as a variable to a keyframes function.
Through this method we can create a staggered effect as we scroll, revealing array items one after another.
useScrollState lets you derive state from changes to the animation context.
The callback passed to useScrollState will be invoked whenever any of its parameters (animation context values) change.
Whenever the return value of the callback changes, the new return value will be set as react state, which in turn will cause the host component to rerender.
For this reason the return value of the callback must be a primitive value so that scrollex can use referential equality to determine if the return value has changed.
See sandbox for functional example.
useScrollState requires one parameter, a callback that should return a derived value.
Note that the state will always be undefined on the intial render as scrollex must perform layout measurements before it will invoke the callback.
useScrollValue returns a framer-motion MotionValue whose value is derived from changes to the animation context.
The callback passed to useScrollValue will be invoked whenever any of its parameters (animation context values) change.
Whenever the return value of the callback changes, the new return value will be set as the new value of the MotionValue that is returned from useScrollValue.
This is useful for controling low-level animations outside of the react render loop.
See sandbox for functional example.
useScrollValue requires one parameter, a callback that should return a derived value.
Note that the MotionValue will always have a value of undefined on the intial render as scrollex must perform layout measurements before it will invoke the callback.