I’m doing animations via GSAP for specific elements on my page. Why are my trigger markers further down the page from the class I’m calling? All the headings that are animating seem to be triggered at the right time, except for my images.
The small square image is what I’m trying to animate (there are no trigger markers next to it)
…because the trigger markers (orange and purple) are way further down the page)
This has been a consistent issue for me with GSAP where the markers aren’t lining up. I think the main culprit is the tab feature, or the height of the page on load is different from once I start scrolling but I’m not certain. I’ve tried scrollTrigger.refresh(), and setTimeout, but none of it is working.
Here is my site Read-Only: **[LINK]
Here’s my link to the published site, with the GSAP libraries and animations: [LINK]