Jump to content
Search Community

ScrollTrigger start trigger position is off

markpopkes test
Moderator Tag

Recommended Posts

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.

onload.thumb.png.2250c74a003ee1ddaed8183b3ad663d9.png

 

When you resize the browser oh so slightly, the start position is where it should and ScrollTrigger works like magic.

 

1972435259_afterresize.thumb.png.e76c86fbdeac3b0949486ab724a177c2.png

 

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

 

See the Pen QWEyedJ by markpopkes (@markpopkes) on CodePen

Link to comment
Share on other sites

Hey Mark and welcome to the GreenSock forums.

 

Usually this means that your page hasn't fully loaded before ScrollTrigger is initialized. So the start positions are different after the content finishes loading. Make sure to either wait until the page has fully loaded to initialize ScrollTrigger or call ScrollTrigger.refresh() after the page is finished loading to fix the issue.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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" 🤦🏼‍♂️).

 

gsap_passed_footer.thumb.png.e91da8161df11c4f6a48b90ae0f54e3b.png

Edited by markpopkes
type-o
Link to comment
Share on other sites

16 hours ago, markpopkes said:

I'm under the impression that my ScrollTrigger script is in fact loading after the page loads

Yeah, unless you're doing some dynamic loading or something like that that is true.

 

Can you please create a minimal demo of the issue if you'd further help debugging?

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...