scroll Trigger pin on mobile

[rala]

Hi, I follow the example  in codepen  to fade in content in the same section and it's work,but my problem is on mobile the text overlapping other sections as in the code we set gsap.set(elem, {position: "absolute", top: 0});for the text div and the parent container has only 100vh height which is not enough on mobile what can I do to solve this issue and keep the scroll Trigger and pin even on mobile 

See the Pen GREdeXe by GreenSock (@GreenSock) on CodePen

[GSAP Helper]

Hi @rala. I read your question about 4 times and I don't understand, sorry. 

Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

If you don't want ScrollTrigger to do a refresh with a mobile browser shows/hides the address bar, you can do this: 

ScrollTrigger.config({ ignoreMobileResize: true });

 

[Rodrigo]

Hi,

 

This is mostly a CSS issue. My advice would be to first get your HTML and CSS working as you expect on mobile/tablet/desktop screens and then add GSAP to the mix. Once you have your animations working as expected then plug ScrollTrigger.

 

Also you should take a look at GSAP MatchMedia, since it makes super simple to create animations for different screen sizes:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps. If you keep having issues remember to include a minimal demo.

Happy Tweening!