Syncing text and animated image using ScrollTrigger

[sbishop]

I need some help with syncing up some text animations (opacity, color) with a moving image. The image moves from bottom to top of viewport during scroll, and I need to change the opacity and color of the text as it moves past them. Getting it to sync up perfectly is a challenge, and even more challenging when trying to get it to work across all device sizes. I am using durations to try to sync up the text changes, but is there another way to do this that I'm missing? Is this impossible? I'm also having an issue when the viewport is resized, the animation gets way out of whack, and requires a reload in order to re-calculate. Any help greatly appreciated! See codepen.

See the Pen PoXbWvw by stephenbishop (@stephenbishop) on CodePen

[mvaneijgen]

Hi @sbishop welcome to the forum!

 

Having the need that things sync up is for me a clear case to have one timeline with one ScrollTrigger that controls the whole animation. Wanting to try and do this with multiple timelines and multiple ScrollTriggers, will make it a lot harder.

 

Instead of me trying to understand your CSS, I've just thrown out a lot of it, not because it is bad, but I just have a certain way of doing things, which allows me to explain it better. 

 

Below pen has removed some HTML and some other quick fixes to show everything in view. With CSS I've made it so that all elements are in the center and all overlapping each other, this is done with CSS grid. As you can see there is also no ScrollTrigger that is because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

See the Pen zYyowZx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Now if this is the animation you're looking for, it is time to see what it looks like on scroll. I've tweaked your animation a bit, but I hope this demonstrates how you can go about animating something with ScrollTrigger. Hope it helps and happy tweening! 

 

See the Pen poqNPNG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[sbishop]

Thanks so much for your detailed response and CodePens! It wasn't quite right, but it did set me on the right track of being able to consolidate my multiple timelines to one and match up the start times and durations so it works perfectly on all screen sizes. I'm pretty new to gsap, so am still getting the hang of timeline management. I got it to work perfectly after your post, and the code is so much cleaner, so thanks again! You can see the results at https://earlyhealth.com