ScrollTrigger not working on small screens

[Pablitooten]

Hi, thank you for gsap and all the effort behind it.

 

I have an html + css + js with gsap and scrollTrigger page with 6 separated scrollTrigger animations, the animations are all like: 

let tl = gsap.timeline({

    scrollTrigger: {

      trigger: ".hero-main",

      start: "top top",

      scrub: true,

      pin: true,

      anticipatePin: 1, 

      pinSpacing: true,

      markers: true,

    },//cierra scrollTrigger

  });//cierra timeline

  tl.to(".hero-img2", {opacity: 1})

    .to(".hero-img2", {filter: "saturate(0%)"}, .6)

    .to(".hero-phrase", {opacity: 1}, .6)

 

Another type of animation is the not-pinned one, it is like: 

gsap.to(".section2 .box1", {

    scrollTrigger: {

    trigger: ".section2",

    start: "top bottom",

    end: "top -30%",

    anticipatePin: 1,

    pinSpacing: true,

    toggleActions: "restart reverse restart none",

    // markers: true

  },//cierra scrollTrigger

    opacity: 1, duration:4, ease: "circ"});

 

They are basic animations where i just create a timeline, make a pin to an image, change the image, move text etc... Others don't do pin and they just execute on start and have toggleActions. Basic stuff for my basic knowledge.

 

It works fine in my laptop at normal screen, but when click f12 and try the simulator for small screens that comes with chrome or firefox, it has a couple of serious problems:

a) it doesn't do the pin on start: top top, it does it around "top center", so the white space created with pinspacing is visible. If i eliminate pinspacing, the pin keeps starting late (so the problem is still there) and the next element "eats" the "late" pinned one. 

b) the animations that don't have a pin just don't execute at all.

c) Jumping problems that goes back to the same animation a couple of times.

 

I have noticed that the markers are visible with laptop screen, but with small screen these markers just dissapear. It is like going to small screen just make gsap explote. Start top top should work regardless of the size of screen, isn't it? we are saying top, the top of the screen. 

 

I have tried matchMedia putting it in each scrollTrigger or one affecting the whole set of animations, one whole day trying matchMedia, also i tried ScrollTrigger.refresh(), i have been 2 days looking for info, now i am just so confussed... Why animations pin late? why animations without a pin does not execute? how can the  markers dissapear? Notice that all works perfect in laptop normal screen. What am I missing?

 

Little help please. Thank you.

[ZachSaucier]

Hey Pablitooten and welcome to the GreenSock forums.

 

It's impossible for us to help based solely on your description. Please create a minimal demo of the issue using something like CodePen if you'd like our help debugging  

[Pablitooten]

Hi ZachSaucier, i can't copy all the code in that 3 little screen window of codepen, it is very long and almost unreadable, i have been working months on it. I have done a little extract of it, although it is not working for me, a sad face is appearing where the animation should be. Still i don't know if would be able to see it in mobile view in codepen, even if it worked. My problem is only with mobile view.

 

See the Pen jOVrmVv by pablitooten (@pablitooten) on CodePen

 

The thing is, my code is working perfectly in a laptop, as soon as i click f12 and change to mobile view in Chrome or Firefox, i have the problems above mentioned, the pin is done late, like start:"center top" so the pinSpacing is revealed and there is a white space. The animations without pin are not executed...

 

I don't really know what to do. I am stuck. Just please give me some ideas to try, starting from that concept of pin problem, why my animation could pin correctly in normal view but late on mobile view? what could be causing that? 

[ZachSaucier]

If you recreate the issue on CodePen you can definitely view it in a mobile view. Unfortunately without a minimal demo that reproduces the issue I don't think we can help you out. 

[Pablitooten]

No worries, i have solved myself by deleting parts of the code until the error happened.

Surprisigly, and i still don't understand it, a transform: translateX(100%) in CSS which later i bring back to screen with gsap using X: 0... That was the cause, when i erase that transform in CSS the pin is done correctly in mobile screen, but if i don't erase it, the pin is done late. 

I tried to put tl.from and transform it from GSAP but  same error. As soon as those elements have a transform translateX in CSS or in GSAP, that brings the pin error in mobile screen. I don't know how that is related but it is.

But only in mobile screen this error, strange thing...

 

Thanks anyway. If someone have problems of late pin in mobile screen view, maybe erasing the translateX in CSS that help...

[VIPStephan]

I’m not able to reproduce what you wrote but I might have a hint why this problem occurs: CSS transforms create a new stacking context which could lead to unexpected behavior with positioning and z-index. Perhaps this is the issue and you should move the translation to a child element of the pinned element(s).