Jump to content
GreenSock

kprkr

Scrolltrigger loading midway down page after refresh

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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
  });
});
  }
})

 

Link to comment
Share on other sites

  • Solution

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? 

  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites


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

 

  • Like 1
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.
×