I am working on react-spring and trying to achieve a scroll effect in which when i scroll from first page to second page then given card increase in size in same position and text also changes with upwards fading transition , but scroll not working in my case .

i have 3 page and have some random elements on them my main focus is sticky div and want to increase its size so it looks like it is increasing in second page and shows new data inside it. here is my code link.
sandbox

 <ParallaxLayer
          sticky={{ start: 0, end: 3 }}
          style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
          <div className={`${styles.card} ${styles.sticky}`}>
            <animated.div ref={ref} style={springs}>
              <p>I'm a sticky layer</p>
            </animated.div>
          </div>
        </ParallaxLayer>