kmytor Posted October 7, 2022 Share Posted October 7, 2022 Hi, I am trying to use the pin for a menu, but it works fine when I start the scroll star, but two things happen. 1 does not reach the end (FOOTER), about halfway the pin is disabled and the menu jumps many times. 2 When returning to the start or return a weird error comes out and it looks very ugly and uncontrolled. I do not know what I'm doing wrong, someone can guide me or help me thanks. See the Pen ZEoMxjo by kmytor (@kmytor) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 7, 2022 Solution Share Posted October 7, 2022 It's almost always a bad idea to animate the trigger element itself, especially if it's being pinned. The trigger is the thing that's being used to calculate positioning, so you're throwing off the calculations by animating it. Instead, just put it in a container element that you pin, and then you can animate the child. Your layout already had a container, so all I did was change it to pin that instead (using it as the trigger, but still animating the child ul): See the Pen LYmJgYW?editors=1010 by GreenSock (@GreenSock) on CodePen Does that help? 1 Link to comment Share on other sites More sharing options...
kmytor Posted October 7, 2022 Author Share Posted October 7, 2022 Great, I thought it was more complicated, I think I still need to understand a little more about gsap. thank you very much Link to comment Share on other sites More sharing options...
kmytor Posted October 7, 2022 Author Share Posted October 7, 2022 now I have another problem with the scrollTo, should I open another case or can you help me on this one? Link to comment Share on other sites More sharing options...
GreenSock Posted October 7, 2022 Share Posted October 7, 2022 It's usually best to open another thread but if it's directly related to this same demo above, it's okay to post here if you prefer to keep it together. Link to comment Share on other sites More sharing options...
kmytor Posted October 7, 2022 Author Share Posted October 7, 2022 What happens now is with scrollTo() it doesn't animate, it makes small jumps, sometimes it works and sometimes it doesn't. it's from the same project but it doesn't have to do with scrolltrigger. thanks See the Pen OJZBMjj by kmytor (@kmytor) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 7, 2022 Share Posted October 7, 2022 That's because you are using regular <a> links and by default the browser will try to immediately jump to that anchor link on the page. So GSAP doesn't have a chance to animate there - the browser is hijacking things. You simply need to call event.preventDefault() on the event like: See the Pen MWGPjmP?editors=0010 by GreenSock (@GreenSock) on CodePen (Notice that you had the "ease" in the wrong place previously too). Does that help? 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