So, the Codepen demo DOES NOT replicate my issue -- which is sooooo frustrating. The Codepen demo works flawlessly. Hopefully screenshots can help.
When you open the page, the start position is totally off.
When you resize the browser oh so slightly, the start position is where it should and ScrollTrigger works like magic.
It's super weird and I cannot figure out why. I've tried other triggers, endTriggers, etc. Nothing. Other pages look good. The only thing I can think of is I have a lot of show/hide functionality with those "view floor plan" buttons. Perhaps that's messing things up? Not using floats, but flexbox, too.
I wish I could share a LIVE working page with the issue.
Official code:
ScrollTrigger.matchMedia({
'(min-width: 1024px)': function () {
var tl = gsap.timeline({
scrollTrigger: {
//markers: true,
trigger: '#main',
start: 'bottom bottom',
endTrigger: '.footer',
end: 'bottom bottom',
scrub: true,
toggleActions: 'play none reverse none'
}
});
tl.to('.js-text-header', { duration: .25, opacity: 1, height: 'auto' });
tl.to('.page-cta .grid-container', { duration: .25, boxShadow: '0 0 0px 0px #fff' });
}
});
(sorry if the formatting is off copy and paste ¯\_(ツ)_/¯)