Having one element's scroll position control a different element's animation

[dalespiteri]

For example, say I had a container that was 300vh tall, and as the user scrolled through that element, I want various other fixed position elements to animate. I can't have these fixed elements animate based on their scroll positions for obvious reasons, so I need to attach the listener to another DOM element. The PLX animation library for React does this with a start property that allows you to tell the library which element to pay attention to in which to base the driver on. Maybe this is included in the library already (in fact, it seems like it must be), but after reading through the docs, I can't see any way to accomplish this. It seems to be done using the elements property, but the docs don't really go into any depth surrounding that, and I don't understand how that property is expected to be used.

This is the general idea that's used in PLX:

lax.addElements(
  '.fixed-element', 
  {             
    scrollY: { 
        start: '.container',
        opacity: [
          [0, 100],
          [1, 0]
        ]
    }
  }
)

[arthurdenner]

Hi @dalespiteri! 👋🏽

I think what you've asked relates to this comment: #66 (comment)
Can you try to use the scrollTop of the .container element as the driver for scrollY?