Mobile browser tripping up ScrollTrigger

[maxcreative]

Hello,

 

First off, I have really enjoyed using ScrollTrigger. What an amazing tool! We are just putting the finishing touches on a months-long project that you can preview below. I plan on posting it into the "Showcase" section, once finished. Nearly all powered by GSAP!! 🎉

 

My question relates to mobile browsers' lower Nav Bar. I know that I am making some type of mistake WRT how the height is being handled here.

You'll see that on desktop, the first 1000px or so is fine. However on mobile, the main character shown in the example above (Emma), seems to "jump" down several hundred pixels after the first scroll has ended (and the mobile navigation bar collapses). I think that ScrollTrigger is re-firing immediately after that first interaction on mobile.

 

Unfortunately, this code is so complex that I think providing a working CodePen is not viable. However I tried to isolate the relevant parts of the JS code, and paste below:

 

let h = window.innerHeight;

$(document).ready(function() {

// GET EMMA AVATAR HEIGHT
  img1 = $('#p1-img1').height();

// ANIMATE EMMA'S INITIAL PEEK
  gsap.to("#p1-img1div", {
    y: cleanHeight,
    duration: .8,
    delay: 1.3,
    ease: "power2.out",
  });
});

// RISE UP EMMA AVATAR BASED ON SCROLL
gsap.to("#movein-p1s1", {
  y: ((-h / 2) - (img1 / 4)),
  ease: "expo.in",
  scrollTrigger: {
    trigger: "#p1-sec1",
    start: "top bottom",
    end: "+=300",
    scrub: true,
  }
});

Thanks!!

Max

[ZachSaucier]

Hey Max,

 

4 hours ago, maxcreative said:

Unfortunately, this code is so complex that I think providing a working CodePen is not viable.

If you are unable to create a viable minimal example, how are we expected to debug the entire website that you have without even having access to the source code? That seems a bit backwards. You can always create a viable minimal example if you put in the time to do so. That's a significant part of your job as a developer  

 

With that being said, you should definitely use functional values for any values that need to change. For example:

$(document).ready(function() {

// ANIMATE EMMA'S INITIAL PEEK
  gsap.to("#p1-img1div", {
    y: cleanHeight,
    duration: .8,
    delay: 1.3,
    ease: "power2.out",
  });
});

// RISE UP EMMA AVATAR BASED ON SCROLL
gsap.to("#movein-p1s1", {
  y: () => -innerHeight / 2 - $('#p1-img1').height() / 4, // functional value
  ease: "expo.in",
  scrollTrigger: {
    trigger: "#p1-sec1",
    start: "top bottom",
    end: "+=300",
    scrub: true,
    invalidateOnRefresh: true // necessary to cause tween to reset
  }
});

There very well could be other issues in play as well. Please create a minimal example if you'd like further help debugging  

[maxcreative]

Thank you for the response, Zach. I will try it out and attempt to make MVP CodePen with any further replies. Thanks.