Jump to content
Search Community

ScrollTrigger marker change on mobile resize

projecthouse test
Moderator Tag

Recommended Posts

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. 

WhatsApp Image 2021-06-23 at 14.35.49.jpeg

WhatsApp Image 2021-06-23 at 14.35.38.jpeg

Link to comment
Share on other sites

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/

 

  • 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...