[div scroller flicking issue]

I declare you a hero thanks for your reply friend...

 

 

[div scroller flicking issue]

I wanted to prevent mobile address bar hiding and because of this reason I used this html to make it. But when I use scrolltrigger scroller as a div it is flicking or flashing when I scroll on mobile. How can fix that?

 

thanks.

 

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

[gsap dynamic values]

I have hundreds of lines of code. It is really hard to make a demo with my page code here.  I think it is very understandable and clean demo to give an idea to the experienced developers. 

 

I am one of the most incapable website designers all over the workd I think. And If I see this demo anywhere I could easily understand what is needed. Sorry I cannot write my original code here and it is very very hard to make same scenario. Time is precious! If I cannot find solution it really doesn't matter. Just trying to make something woks good.

[gsap dynamic values]

Here is my pen. I created css rules for #elemm in some media queries. I want to change my .slogan top value dynamically. How can I do that? Another way?

if I refresh my page it is getting css top value and working. but when I resize my window I cannot get dynamic value...

 

thanks.

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

[when section enter the viewport]

one more question about this : in your answer start is "30% bottom" when scroll down...is it possible to give second start value when scrolling back to up for example "50% bottom" ???

 

[scrolltrigger only scrolldown]

when I scroll down and finish first section animation...3rd section jumping after it...cannot see section2 (orange one)...but when I scroll up orange section I can see...

[scrolltrigger only scrolldown]

thank you dear Zach...I learned one more thing...

[scrolltrigger only scrolldown]

I want to animate my .text1 element only when I scroll down...and don't want to animate back when scroll up...I saw once:true but when I use it there is a space before first section after timeline reach end...

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

[scrolltrigger animation reverse]

I think if I give toggleActions to text1 it will be ok...right?

[scrolltrigger animation reverse]

Oh yes sorry...I couldn't make greenbox animation reverse...that is what I need especially...

[when section enter the viewport]

Dear Zach

thanks for your reply...I am trying to learn it...just confused...at the beginning of my first animation I asked a question and tailbreezy suggested to make my animations in timeline...but now I learned what I have to do...thanks again...

[scrolltrigger animation reverse]

Hi Dear Zach

I want to make kind of animation group...text1 oncomplete must fire greenbox animation...I don't want to make greenbox animation with scroll...a group of animation must play like a little video...is it possible?

 

[when section enter the viewport]

Hi

I want to animate .text2 div when 10% of .panel2 enter the viewport from bottom...I tried to give start:"top 90%" and "top 10%" to tl2 scrolltrigger but there is something wrong...I think I could not understand how scrolltrigger works yet...but if anyone can help me I'll be pleasure...I am confused...

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

[scrolltrigger animation reverse]

OK I know that. But I want to animate greenbox out of scrolling event...

I want users to see the animation without needing to scroll...like a short video I mean...

[scrolltrigger animation reverse]

Hi

here is my pen. I want to make my scenario like this;

* when text1 animation complete .greenbox bottom to 20px

* when I scroll back to top .greenbox bottom to default css position

 

Is it possible to animate greenbox back without to add it timeline?

 

thanks.

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

[ScrollTrigger adding inset to element]

ScrollTrigger adding inset style property to section element (trigger element). What is inset? Is it possible to prevent it? Why scrolltrigger adding this property? Because of my custom css?

 

thanks.

[ScrollTrigger mobile browser issue]

I discovered something : I added third section .panel3...when I scroll fast again, orange panel not jumping but green panel jumping when reached top of the viewport...it is happening on last section...and only happening if I turn back to page top as page loaded...If I don't turn back all there is no jumping...I hope I can explain...I forked...

[ScrollTrigger mobile browser issue]

I cliked yes...

[ScrollTrigger mobile browser issue]

Hi again

This is the best result I could get. You can check my pen. Only one problem : android 11 chrome 88 jumping issue still exist...But when I browse my pen from this device and browser on codepen results pane, there is no problem. Maybe this will give you an idea.

 

thanks.

[ScrollTrigger mobile browser issue]

Hi Jack

I tested your code on my page. Dektop chrome is ok. Desktop Firefox scrolling too slow I think because of calculating. iPhone 5 ios device safari and chrome it is working good. But android device chrome browser I cannot scroll.

[ScrollTrigger mobile browser issue]

Here is my pen. I having problems on mobile browsers. There is flickering when scroll. Black menu button and its click animation is important for me. That is why I used .allsitecontent div. If problem occurs because of this div I can change my menu scenario. But if I can make it with container div, it is best for me.

 

Another problem is : If I scroll fast when orange section reached top of the viewport, happening kind of jump towards to bottom. This jumping problem occurs only android devices chrome browser. My device OS is : Android 11.0 and Chrome version is  : 88.04324.181

 

I have also have ios and android 8.0 devices for testing. There is no problem. But flickering happening on all mobile browsers.

 

Thanks all..

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

[ScrollTrigger mobile browser flickering]

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?

[ScrollTrigger mobile browser flickering]

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

[scrolltrigger in a div]

yes dear Zach...I asked with a new thread...because my problem has changed...

[ScrollTrigger mobile browser flickering]

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