Jo Mourad Posted March 7, 2022 Share Posted March 7, 2022 (edited) Hey guys, i've been wondering why this happens... And only in a smaller resolution (i was able to reproduce with: 1070 x 635 px - have to refresh when scroll is PAST the trigger) Here is the url: https://idylliq.ca/services/ My pinned element jumps to the left when i scroll. Any idea why? Here is my code: servicesTl = gsap.timeline({ scrollTrigger: { trigger:".section-services", markers:true, start:"10% 50%", end:"bottom 70%", pin:".left-quote", onComplete: () => ScrollTrigger.refresh(), anticipatePin: 1 } }) } servicesTl.from(".left-quote span", 1, {opacity:0, ease: Power3.easeInOut}) .to(".left-quote span", 0.5, {backgroundSize:"100% 100%", ease: Power3.easeInOut},"=-0.5") .to(".left-quote span", 0.5, {color:"#fff", ease: Power3.easeInOut}, "=-0.4") edit: seems that my .left-quote starts with left:0; and then jumps to something like left: 167.875px; (depending on the size of the window i guess) i know this is probably very broad, but thanks anyways!! video.mp4 Edited March 7, 2022 by Jo Mourad fixed video link! Link to comment Share on other sites More sharing options...
OSUblake Posted March 7, 2022 Share Posted March 7, 2022 Hi Jo, Your video isn't available, and I'm not sure what I'm supposed to be looking at on the URL, so a minimal demo would definitely help in figuring the issue out. But if something is jumping, my initial though would be that you don't have some elements positioned correctly. I like to always to do this in my projects to avoid weird positioning issues. * { position: relative; } Link to comment Share on other sites More sharing options...
Jo Mourad Posted March 7, 2022 Author Share Posted March 7, 2022 @OSUblake Oops! You're right! I just fixed that! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 7, 2022 Share Posted March 7, 2022 I'm still not seeing that issue from the video in your URL, but it's more than likely just a CSS issue, like position or maybe the margin. If you can make a minimal demo that clearly shows the issue, it would be easier to give you a more definitive answer. 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