ScrollTrigger marker change on mobile resize

[projecthouse 0 Likes (Newbie)]

I have problem regarding the scroll trigger markers. The triggers' start, end markers change on mobile resize. When you swipe down on a mobile chrome/safari the address bar on top disappears. This creates an unwanted  behavior. The animation needs to be as precise as possible and I need to use the height value of the device to trigger the animation. Is there any way to prevent the  change on marker places. I've posted the problem to clarify it. I can not share codepen or full image of the project. Thanks. 

[Cassie 5,657 Likes (Superhero)]

Hard to tell what the issue is without seeing the code I'm afraid. I really would suggest putting a minimal demo together. You don't have to use any distinguishing features of your project.

unfortunately ScrollTrigger can't really prevent the address bar from showing - that's a device/browser quirk.

Maybe these tips/articles will help point you in the right direction.

Invalidate values on refresh:

gsap.timeline({
  scrollTrigger: {
    trigger: section.parentElement,
    scrub: true,
    invalidateOnRefresh: true
  }})
  .fromTo(section, {
  y: () => -section.offsetHeight - section.parentElement.offsetHeight
}, {
  y: 0,
  ease: "none"
});

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/