ScrollTrigger mobile browser flickering

[Lovestoned]

Here is my pen. Please check it out via mobile browsers. On desktop browsers there is no problem. But on mobile browsers it is not the same.

 

Any idea?

 

See the Pen vYyVyXJ by ersenturgut (@ersenturgut) on CodePen

[tailbreezy]

Hello,

 

Any particular reason for using scroller other than viewport/window? In this situation this is causing you trouble, it would require a bit different setup.

Also try to set your transforms in gsap instead of css.

 

See the Pen f9d136c338ad2db77c1c2b5194584ee1 by dadacoded (@dadacoded) on CodePen

[Lovestoned]

I want to animate my allsitecontent container to left:200 and my website menu will appear on the left under the container...that is why I want to make it in a div...

 

by the way your code is working with a little problem tailbreezy...when I scroll fast and panel2 reached to top of the viewport it is jumping...only on android chrome I see it...ios chrome and safari working good...do you have a chance to check it on android chrome?

 

thanks...

[tailbreezy]

I am still not convinced you need separate scroller.  

 

Also I don't own android devices, so cannot check.

[Lovestoned]

I added draggable.js...

 

here is the screenshot about what is happening when I start to scroll...

[tailbreezy]

So if you are not adding draggable.js, there is no problem?

Also a screen recording will be better than a screenshot in these cases.

[Lovestoned]

ok I will send you screen record next reply...

 

just want to ask a little question...I want to make 3 lines hamburger menu on top left of the first section...and onclick I want to animate all my content left:200 and top:100...how can I do that...if it is possible I can change my scenario about navigation...is it possible to animate all scroller? I don't know how can I do that because all of my sections under body...that's whey I wanted to put my sections in a div...maybe no need...I wonder your advice..

 

[Lovestoned]

Here is my screen records. Video1 is about jumping when I scroll fast, orange section has kind of jumping...video2 is about space after section 1...I forked my pen...after I checked on my android device with chrome browser : under the codepen.io results view it is working good...on desktop also working good...but when I browse with my andorid chrome it is like that in the video...

 

 

 

 

[ZachSaucier]

Perhaps this thread would be useful:

 

[Lovestoned]

If you can help me about my problem on video1 I can change my menu design and animation in different way...again : when I scroll fast orange section make a kind of jump towards to bottom or happening something else...but when I scroll slow or normally there is no problem...

[Lovestoned]

on ios device safari and chrome : ok

on andorid chrome device on codepen.io results view : ok

on desktop : ok

on android device chrome under my website page : nope!

 

there is something different between codepen.io results view and my page..

 

any idea?