Scrolltrigger loading midway down page after refresh

[kprkr]

Hey all!

So, have been using scrolltrigger in my Webflow project and it is going great.

I have a navbar animation that causes it to resize as the user scrolls.

 

However, if the user enters the page and scrolls to quickly, or refreshes the page, the scroll-trigger triggers move to the top of where ever the user is on the page, rather than top of the entire page. Causing the animation to sometimes only happen midway down the page.

Here is a page example:
- https://weareopal.webflow.io/jobs (Let it load, the scroll, that is the ideal outcome)
Now, refresh midway down the page and it will cause the trigger to only happen there, scrolling any higher will keep the navbar huge.

Here is the code used:

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false,
});

ScrollTrigger.matchMedia({
	"(min-width: 992px)": function() {
  
  
// Animate From
$(".navbar-section").each(function (index) {


  let triggerElement = $(this);
  let targetElement = $(".navbar_logo");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "0px top",
      end: "120px top",
      scrub: 0.75
    }
  });
  tl.to(targetElement, {
  	width: "365px",
    duration: 0.5
  });
});

// Animate From
$(".navbar-section").each(function (index) {


  let triggerElement = $(this);
  let targetElement = $(".navbar");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "80px top",
      end: "100px top",
      scrub: 0.75
    }
  });
  tl.to(targetElement, {
  	boxShadow: "0 1px #373737",
  });
});

//navbar_link-list
$(".navbar-section").each(function (index) {

  let triggerElement = $(this);
  let targetElement = $(".nav-content-wrapper");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "20px top",
      end: "120px top",
      scrub: 0.75
    }
  });
  tl.to(targetElement, {
    y: "-20px",
    duration: 0.5
  });
});
  }
})

 

[GreenSock]

Yeah, that looks like a logic thing in the way you set things up - you're using position: sticky rather than pinning. 

 

I'd recommend a few things: 

1. Update to the latest version of GSAP/ScrollTrigger. You're on a pretty old version currently. 
2. Use the new gsap.matchMedia() instead of the deprecated ScrollTrigger.matchMedia(). They do basically the same thing but the new gsap.matchMedia() is more powerful and flexible. 
3. You can simplify this: 

   $(".navbar-section").each(function (index) {
   
   	let triggerElement = $(this);
   	let targetElement = $(".navbar_logo");
   
   	let tl = gsap.timeline({
   		scrollTrigger: {
   			trigger: triggerElement,
   			// trigger element - viewport
   			start: "0px top",
   			end: "120px top",
   			scrub: 0.75
   		}
   	});
   	tl.to(targetElement, {
   		width: "365px",
   		duration: 0.5
   	});
   });

   
   To this: 

   gsap.to(".navbar_logo", {
   	width: 365,
   	scrollTrigger: {
   		start: 0,
   		end: 120,
   		scrub: 0.75
   	}
   });

I'm just using absolute numbers for your start/end values because that's nice and simple in this case - we know we want it to start at the very top and end 120px down.

 

Does that help? 

[kprkr]

Yes amazing thank you!

 

The logo does flash fullsize pre-gsap for a moment but then goes down to the correct size depending on the scroll position. Thats good enough for me!!

 

Thanks!

[Cassie]

That's just down to the order your styles and JS are being processed by the browser - here you go!