UncleMuscles

https://codesandbox.io/s/youthful-pare-nnshv?file=/src/page.js So I'm learning how to have the smooth scrolling of LS and the sweet animation of GSAP but I have 3 issues. First is when I run on a seperate window the animation don't work unless I go and Inspect on Chrome. The the smooth Locomotive Scroll works but as soon as I go full window it stops. Second issue is I'm having real trouble with the start and end trigger points and how to set them. As you can see in my demo I have the markers on and while they have helped a bit I am still left stumped any good tutorials? Third is, as you can see, My code is quite verbose. How could I condense all thes useRef and gsap.to() calls? Thank youuu

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

What I'm trying to do? I've got 2 images on top of each other I want to alpha-in (opacity) via the blend-mix-mode layer with ScrollTrigger. position: relative; height: 100vh; width: 100vw; overflow-y: scroll; } img { min-width: 100vw; max-width: 100vw; height: 200vh; position: absolute; object-fit: cover; &#imageOne{ overflow-y: scroll; } &#imageTwo { overflow-y: scroll; mix-blend-mode: multiply; } } I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on. What I've come up with: So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work. Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js Thanks P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! All the best

Ahh i see thanks I realised that I had set inital values int he SVG and it didnt like that. So once I removed them it ran fine.

Hi, GSAP is awesome! I have made an animated 'P' but mainly using SVG <animate> so far I using the SVG to animate strokedash-offset, dash-opacity and fill. I'm aware that I should probably use Draw for the stroke stuff but I can't afford it, I've been out of work for 10 years+ and recently I've decided to become a webdev so I've been designing my portfolio so money is tight. I was wondering how would I animate these 3 attributes as I have tried using .to() and putting {strokeOpacity: 0} as it is set to 100% initaly but this does not work. How come? I have also had the same problem with strokeDashOffset and Fill. Hoe can I animate these properties with GSap like I have with SVG below? https://stackblitz.com/edit/paulscv-2qssl8?file=src%2Fbg-components%2FletterP.js Ultimatly my goale is to animates these things with scrollMagic. But for now it would b e nice just to animate them. Is this possible? Thanks