React-Spring Integration

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 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