jumps with the scrollTriegger pin

[kmytor]

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

[GreenSock]

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? 

[kmytor]

 

Great, I thought it was more complicated, I think I still need to understand a little more about gsap.

thank you very much 

[kmytor]

now I have another problem with the scrollTo, should I open another case or can you help me on this one?

[GreenSock]

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. 

[kmytor]

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

[GreenSock]

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?