Multiple scrolls on an element with multiple targets?

[xdanielc]

So I have one element which I wanna animate on different screens. I animated one different property on each screen and things worked, but if I wanna animate things like color back and forth, only the last line works. For reference the offset here means start end and end end.

scroll(animate('#myElement', {color: ['#fff', '#000']}), {target: document.querySelector('#screen1')!, offset: ['0 1', '0 0']})
scroll(animate('#myElement', {color: ['#000', '#fff']}), {target: document.querySelector('#screen2')!, offset: ['0 1', '0 0']})

I could use different solutions, like wrapping both screen elements in another element, and using keyframes, but if they have different sizes I have to take into account the keyframes positions. Thankfully in my case both are the same size, so I can use offsets like 0 2.