Using with react-spring

Using a state to do animations can be very expensive in terms of performance.

react-spring provides a way to control the styles/text without triggering re-renders. By using the SpringValue (opens in a new tab) with an animated element, you can update the value without triggering re-renders.

react-scrollytelling provides a wrapper around useSectionScroll() to update the SpringValue, so you can animate the element based on the scroll progress.

Example

Single Section

You can use useSectionScrollSpring() which returned updated SpringValue - scrolledRatioSpring based on the scroll progress:

import { useSectionScrollSpring } from '@react-scrollytelling/react-spring';
import { animated } from '@react-spring/web';
 
export const Section = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const { scrolledRatioSpring } = useSectionScrollSpring(sectionRef);
 
  return (
    <>
      {/* Use SpringValue with an animated element to change the styles */}
      <animated.section ref={sectionRef} style={{
          opacity: scrolledRatioSpring.to((val) => 0.2 + 0.8 * val),
          borderWidth: scrolledRatioSpring.to((val) => `${Math.round(val * 6)}px`),
        }}>
      {/* ... */}
      </animated.section>
    </>
  );
};

Example

  • scrolledRatio: 0

Multiple Sections

Example

You can simply the example in track grouped sections and use useActiveSectionSpring() to get the active section information and the updated SpringValue based on the scroll progress:

import { useActiveSectionSpring } from '@react-scrollytelling/react-spring';
 
const { trackingId, scrolledRatioSpring } = useActiveSectionSpring();
You are viewing section
0
RED
ORANGE
YELLOW
GREEN
BLUE
PURPLE
Video PlaybackParallax