Lovestoned Posted March 7, 2021 Share Posted March 7, 2021 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... See the Pen ExNeGWJ by ersenturgut (@ersenturgut) on CodePen Link to comment Share on other sites More sharing options...
tailbreezy Posted March 7, 2021 Share Posted March 7, 2021 Hello there, This space between the gray and orange panel is caused by pinSpacing. It is an option for the scrollTrigger that adds space in order to space elements in the DOM quickly. If you remove it, you will have to push your remaining content by the same value you use in scrollTrigger. Other than this, your rule tl.to('.text', {...}) will tween all your text classes at the same time (e.g when you reach your orange panel the text will be in its completed state). let tl = gsap.timeline({ scrollTrigger: { trigger: ".gray", scrub: true, pin: true, pinSpacing:false, start: "top top", end:"500%", markers:true } }); gsap.set('.orange', {yPercent:500}) 3 Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 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... Link to comment Share on other sites More sharing options...
tailbreezy Posted March 8, 2021 Share Posted March 8, 2021 Your #cont doesn't move because it has position:static (default). If you want to move it on click you have to set it absolute, relative, etc. It seems you are after a sidebar that translates the page content to the right. var tl = gsap.timeline({paused:true, reversed:true}) .to("#cont", { duration:1, left:120 }); window.addEventListener('click', () => { tl.reversed() ? tl.play() : tl.reverse() }) 1 Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 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... Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 ok I found solution about flickering...I changed overflow property to : overflow-x:hidden overflow-y:auto it is working... Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 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... Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 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... Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2021 Share Posted March 8, 2021 @Lovestoned Please use the "fork" button on CodePen to create a new version of your demo, share it with us, and clearly explain the issue if you'd like our help debugging. Apparently you made a new thread. Link to comment Share on other sites More sharing options...
Lovestoned Posted March 8, 2021 Author Share Posted March 8, 2021 yes dear Zach...I asked with a new thread...because my problem has changed... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now