markpopkes

Don't you just love those "aha!" moments. Something I didn't account in my demo is that I'm using an ajax call to pull in some data and I remembered that sometimes (all the time?) you need to initiate some JS code after the AJAX finishes pulling the data you need. So, in my real life example, I'm calling some additional functionality (mixitup, magnficPopup, etc.) and realized THAT'S where ScrollTrigger.refresh() needs to go. Maybe this visual will also help someone. var apiURL = 'https://some_url_holding_my_JSON_data'; $.getJSON(apiURL, function (data) { // do some cool stuff with data }).done(function () { // initiate some more JS after AJAX does its thing. // refresh scrollTrigger ScrollTrigger.refresh(); }); Consider this resolved! I appreciate your help!

I'm not noticing the markers are placed well below the footer, which is super odd with ScrollTrigger.refresh() (please excused the type-o in the screenshot: "past" should be "passed" ??‍♂️).

Thank you for the quick reply. So the way I'm calling out my code is like this: All my scrollTrigger code is put into a function and then called when the window "loads". I'm under the impression that my ScrollTrigger script is in fact loading after the page loads -- unless I'm missing something. // Set up App object and jQuery var App = App || {}, $ = $ || jQuery; App.CTA_Sticky = function() { // all my ScrollTrigger ScrollTrigger.matchMedia({ var tl = gsap.timeline({ // my code here }); }); } $(window).on('load', function() { App.CTA_Sticky(); }); I tried to call ScrollTrigger.refresh() but can't seem to figure out where to put it because it never made a difference.

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 ¯\_(ツ)_/¯)