Thank you for the help Mr Jack I think I got a bit confused over the Trigger and Scroller use cases. For some reason it didnt make any changes to my code. I tried to implement what you said to no luck. So now I have tried to dumb it down as much as I can to this.
gsap.set(imageTwo.current, { opacity: 1 });
timeline.current = gsap.to(imageTwo.current, {
opacity: 0,
yoyo: true,
repeat: -1,
scrollTrigger: '#bg'
}
Only one of the images has a mixblendmode enabled so in contratc to the image behind it I should see an effect when fading with the opacity.
I have ID'd the div container #bg as it holds the Y scroller. I assume this is the scrollTrigger? and has the 2 images inside
You can see in this example https://stackblitz.com/edit/react-pvbx1r?file=src%2Fcomponents%2Flanding.js That I'm trying to do this animation but with the scroller rather than using yoyo and -1 repeat. If you change the mix-blend-mode on &#imageTwo you can see the diffrent effects that I tihnk would be cool to controll with the opacity and the blend modes via the scroller/trigger
Thanks for replying Mr Jack I wrote out that whole post and then I made it as simple as I could and Now it works . An example https://stackblitz.com/edit/scrolltrigger-blendmode-example?file=src/components/landing.js
Thanks for the help