chrisdb

When I refresh the page the markers for Scrolltrigger can change their starting position which throws off my pinned background element. If you refresh the page and cache (CTRL + F5) it always loads the marker position correctly but when just refreshing page normally (F5) it sometimes loads the 'start' marker too high which as a result causes my pinned element to overlap the videos and cause my other Scrolltrigger animations to start too early. I have read through the forums and found similar issues and tried adding ScrollTrigger.refresh(); to each animation but this didn't fix the issue. Does anyone have any idea how to resolve this? I have included this on Codepen as an example and it doesn't seem to replicate the issue. Untitled.mp4

Found the issue Cassie, thanks again for the help. Have a lovely day!

I need the text to change after the animation kicks in

I want the text once the scrolltrigger changes the background to white to change the h2 & p text from white to black. At the moment the text stays dark and you cant see the text before the scrolltrigger changes the background to white. Sorry struggling to explain this, hope this helps.

Thankyou Cassie thats worked perfectly. Appreciate the speedy response. Another quick question... When the white section scrolltrigger hasnt kicked in I want to have the text color white so its visible on the dark background then change to black once the white background has come into view. How would I include this?

Hi, I want the scrolltrigger animation to only show on desktop. I am new to GSAP and dont really know where to insert the media function in my code. Could someone help please.