Video Playback

You could use the <Video> component to create a sticky video that plays based on the scroll progress:

import { Video } from '@react-scrollytelling/video';
import { useSectionScrollState } from '@react-scrollytelling/core';
 
 
export const StickyVideo = ({ src }: StickyVideoProps) => {
  const { scrolledRatio } = useSectionScrollState(sectionRef);
 
  return (
      <Video
        className="h-full w-full object-cover"
        width={width}
        height={height}
        src={src}
        ratio={scrolledRatio}
      />
  );
};
0%

If the playback is not smooth, try to re-create the video with a smaller keyframe interval (opens in a new tab):

ffmpeg -i input.mp4 -g 4 -vcodec libx264 -profile:v main -level:v 4.1 -an -movflags faststart output.mp4
Track Grouped SectionsUsing with react-spring