framer-motion-scroll.tsx

const Item = () => {
   const progress = useScrollProgress()
   return <motion.div style={{ opacity: progress }} />
}

const App = () => {
  return (
     <Scroll.Section 
      start={{ section: 'start', container: 'center' }} 
      end={{ section: 'end', container: 'center' }}
     >
        <Item />
       <Scroll.Slice start={0} end={0.5}>
         <Item />
       </Scroll.Slice>
       <Scroll.Slice start={0.5} end={1}>
         <Item />
       </Scroll.Slice>
     </Scroll.Section>
  )
}