Lovestoned

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

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.

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.

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.

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" ???

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

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

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

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

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

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

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?

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

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

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.

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.

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

I cliked yes...

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.

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.

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

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?

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

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

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... video1.mp4 video2.mp4