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

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

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

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?

Now I tried my link in iphone and there is so much flickering...there must be a solution about that issue...gsap team is professional and I am sure they've noticed this before... mobile browsers addressbars drives people crazy...I changed css of html and body to overflow:hidden position:fixed but not changed... I couldn't find solution about scrolltrigger vs mobile...

sorry problem still persists but with a small difference. when I scroll in first section there is no problem...addressbar not hiding but when I scroll second section addressbar hiding and when I scroll back to first section there is flickering at the top of the viewport... I tried pinType fixed and transform, anticipatePin but nothing changed...

ok I found solution about flickering...I changed overflow property to : overflow-x:hidden overflow-y:auto it is working...

Ok I found solution with your help...thank you...but I have a little problem again...when I scroll on mobile there is kind of flickering if I call scrolltrigger...but if I remove scrolltrigger function there is no problem...what do you think... here is my link: https://elbielectric.com/yeni/budur.php if you browse this link with mobile browser, you can see my problem...on desktop everything is ok...

thanks for your reply tailbreezy but it is not working or I couldn't ...I want to make : when I click .text => #cont must animate to left:120px...because I want to make website menu under all content div...I want to slide #cont to left...thats all...

I used container div for my scroller...but I am having problems...if you check my pen you can see it...there is a space between gray and orange sections...I couldn't find example about that...I am missing something but need help... thanks...

ok I found solution...added invalidateOnRefresh: true...and it is working...not an issue about css... thanks...

Hi Zach Sorry but I cannot find solution. I tried different ways to center my .text element vertically. Removed transform property from element and changed .panel element display to flex, justify-contents:center, align-items:center...but I couldnt animate it to top:120px when I comment out tl.to .text it is centering my absolute element in .panel but when I apply tl.to not centering on resize... I want to make my .text element vertically centered in .panel and on scroll animate it to top:120px...so please help me to make it...ok I understand it is css issue but I need your experience... is it a problem about to refresh on resize?as you see it is working but when resize not centering itself vertically...

Hi, Here is my pen. I am having positioning problem on window resize. When I remove tl.to function from .text1 it is centering in container. But now it is not centering vertically... thanks.

ok I changed body position to absolute and its working good...

here is my pen...working good on desktop but not working on mobile..chrome on android... what is my fault? I think it is about html and body css styles...when I scoll down on my mobile, chrome address bar disappear as you know...because of this reason scrolltrigger cannot work correctly... thanks.

ok I removed end property and I wrote delay to text2 animation...it is working as I want right now...thanks for your reply...

I mean, when orange container reached to top of viewport if user continue the scroll text1 will start to animate to -50 and than text2 will start to animate to -50 and than orange will start to disappear from the viewport...I want to make multiple items animations in orange container and than scroll to next gray container...

OK please can you help me to make it correct...Let me explain what I want; until the 50% of orange my text1 must animate to -50 until the 100% of orange my text2 must animate to -50px is that possible? and how can I write that?

ok it is invalid use but if you check and run code again you can see animation what I want...working as I want...it helps you that understand what I want...and help me to make it valid..I clicked fork button...

it is working as I want but I see errors on console... Invalid property end set to 50% Missing plugin? gsap.registerPlugin() but working....

ok I made it...I removed end option from timeline and give it to both of them...working now...you can check on my pen... thanks...

ok but this is not what I want...I want to make first text1 to -50 until 50% and then text2 to -50 until 100%...on your code both of them ending with 50% of container scroll...I want to make multiple items in a section and last one end 100%...for example tex1 20%, text2 40% ..... lastText 100% I hope I can explain...

I created 2 divs in orange section...I want to animate them first text1 marginTop -50px to 50% of orange container and text2 to 100%... actually I will add 2 more texts in section orange...but I have to understand with these two divs animation...I started to use scrolltrigger today and I am new... if you check my codepen you can understand my problem...(I cannot understand multiple child use...) thanks...

I added throwprops plugin and throwProps: true to draggable.create() but I dont know what I am gonna do ob js code...I think you dont have any idea?

yep jonathan its great....I implemented your code...its working well another question...is it possible to use throw props with draggable? if yes it would be great... thanks...