I am trying to do something like this – https://www.loom.com/share/aa9e75b4d461400c9f8173240556fa24

Basically, it should work like this: When I scroll to the center of the video element, everything else should stay in place, and only the video element should change as I scroll. It should scale to fullscreen.

Here is a code that I come up with, but I struggle with the sticking part:

import Image from 'next/image';
import React, { useRef, useState } from 'react';
import { motion, useMotionValueEvent, useScroll, useTransform } from 'framer-motion';

const CultureSection = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const sectionRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
  });

  useMotionValueEvent(scrollYProgress, 'change', (latest) => {
    setIsScrolled(latest >= 0.5);
  });

  return (
    <section
      ref={sectionRef}
      className='relative h-[600dvh] bg-cc-dark-green'
    >
      <div className={`${isScrolled ? 'sticky' : ''} top-0 h-dvh`}>
        <div className='flex flex-col items-center justify-center gap-16'>
          <figure className='h-[50dvh] w-[50vw]'>
            <Image
              src='/images/fig_culture_2.webp'
              width={1920}
              height={1080}
              alt={'Culture image'}
              className='h-full w-full rounded-2xl object-cover'
            />
          </figure>
          <figure className='h-[50dvh] w-[50vw]'>
            <Image
              src='/images/fig_culture_1.webp'
              width={1920}
              height={1080}
              alt={'Culture image'}
              className='h-full w-full rounded-2xl object-cover'
            />
          </figure>
          <motion.figure className='h-[50dvh] w-[50vw]'>
            <video
              src='/videos/hr-30s-bez-titulku.mp4'
              className='h-full w-full rounded-2xl object-cover shadow-lg'
              autoPlay
              muted
              loop
              playsInline
            />
          </motion.figure>
          <figure className='h-[50dvh] w-[50vw]'>
            <Image
              src='/images/fig_culture_3.webp'
              width={1920}
              height={1080}
              alt={'Culture image'}
              className='h-full w-full rounded-2xl object-cover'
            />
          </figure>
        </div>
      </div>
    </section>
  );
};

export default CultureSection;