Laszlo Posted February 22, 2022 Share Posted February 22, 2022 Hello, I am new here and I trying to achieve a special scroll workaround here: This is almost what I am looking for but I'd like to stop/prevent the vertical scrolling during the 'fromTo' animation. Maybe I have misunderstood the manual but if not this is not possible with only the 'fromTo'. ( https://greensock.com/docs/v3/GSAP/gsap.fromTo() ) Is this possible anyway with GSAP or somehow I better prevent the scrolling with native JS or my approach is completely wrong? Could you suggest to me any direction which might be a help for this? Regards, Laszlo See the Pen oNodqaJ by laszlokosa (@laszlokosa) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 22, 2022 Share Posted February 22, 2022 Welcome to the forums @Laszlo What do you mean prevent scrolling? You have a scrub animation that is tied to scrollbar movement, so I'm not understand how you are expecting to prevent scrolling while also having an animation that is dependent on scrolling. 🤷♂️ Link to comment Share on other sites More sharing options...
Laszlo Posted February 22, 2022 Author Share Posted February 22, 2022 Hello OSUblake, I meant that I'd like to prevent the view moves down or up during the animation. So my expectation was to achieve something like this: 1) scroll down to the start position 2) scroll further and the fromTo handle the scrolling left to right - but prevent moving down until the end position of the image 3) at the end position of the image continue the moving down when scrolling further Maybe I am completely off the road with this and GSAP is not the right way for this. I am not sure. That's why I asked. Regards, Laszlo Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 22, 2022 Solution Share Posted February 22, 2022 You can prevent the trigger from moving during the animation by using the pin property, which will keep it fixed in place. Quote pin Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element. Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element. See the Pen vYWjrxe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Laszlo Posted February 22, 2022 Author Share Posted February 22, 2022 2 minutes ago, OSUblake said: > You can prevent the trigger from moving during the animation by using the pin property, which will keep it fixed in place. Thank you @OSUblake for this super quick help and even the description! This is perfect for me! 1 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