Issues with Overlapping Sidebar Menu Items on the Scroll

[Atul Singh]

Hello everyone!

 

I am encountering an issue where the sidebar menu items are overlapping on the left sidebar menu in this demo.  Can anyone help me with this? Thank you!

See the Pen XWoyaBW by atulkumarsingh (@atulkumarsingh) on CodePen

[mvaneijgen]

Hi @Atul Singh

 

I've changed some of your JS, not because it was bad, but I needed to get a feel for how things were setup. You can just enable them again. 

 

The main thing I changed is set immediateRender: false, to your timelines. This is necessary because you've multiple timelines that tween the same element and GSAP gets all the starting values on page load, but in this case it needs to wait for the previous timeline to finish before it gets the new values. 

 

I've also changed your .to() animation to a .from() and removed you gsap.set(), because your elements are already at yPercent: 0, so a .from() yPercent: 100 is all you need. I've also changed your .set() autoAlpha to animate the headers up, just for me to better see the animation, but I've used the position parameter to have the two tweens animate at the same time. If you are 'set' (pun intended) on animating the opacity, you can just change that, but keep the position parameter, so they animate at the same time.  

 

Hope it helps and happy tweening! 

See the Pen WNLYdXK?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Atul Singh]

14 minutes ago, mvaneijgen said:

Hi @Atul Singh

 

I've changed some of your JS, not because it was bad, but I needed to get a feel for how things were setup. You can just enable them again. 

 

The main thing I changed is set immediateRender: false, to your timelines. This is necessary because you've multiple timelines that tween the same element and GSAP gets all the starting values on page load, but in this case it needs to wait for the previous timeline to finish before it gets the new values. 

 

I've also changed your .to() animation to a .from() and removed you gsap.set(), because your elements are already at yPercent: 0, so a .from() yPercent: 100 is all you need. I've also changed your .set() autoAlpha to animate the headers up, just for me to better see the animation, but I've used the position parameter to have the two tweens animate at the same time. If you are 'set' (pun intended) on animating the opacity, you can just change that, but keep the position parameter, so they animate at the same time.  

 

Hope it helps and happy tweening! 

 

 

@mvaneijgen  Thank you, my friend!
You're a rockstar. Thank you so much.

[Atul Singh]

4 hours ago, Atul Singh said:

@mvaneijgen  Thank you, my friend!
You're a rockstar. Thank you so much.

Hi @mvaneijgen, The Sidebar is creating a problem with the words menu text. In the below codepen, I added 2 words in the first menu item in the sidebar. Can you please help me? I tried to opacity but it's not working.

See the Pen eYbQKQg by atulkumarsingh (@atulkumarsingh) on CodePen

[mvaneijgen]

I've changed the logic a bit. The li has an overflow: hidden; and instead of animating the li we animate the <a> element inside. Hope it helps and happy tweening!  

 

See the Pen MWZzBoE?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Atul Singh]

On 10/6/2023 at 6:55 PM, mvaneijgen said:

I've changed the logic a bit. The li has an overflow: hidden; and instead of animating the li we animate the <a> element inside. Hope it helps and happy tweening!  

 

 

 

HI @mvaneijgen , The start and end points are not working properly for the last items. It's scrolling too quickly. The left pin should be there until the right side content touches the top window. Can you please help me?

See the Pen WNLqaaO by atulkumarsingh (@atulkumarsingh) on CodePen

[mvaneijgen]

Hi @Atul Singh, 

 

Before checking the answer below I advies you to take another good look at your code! It is a really simple fix and I've look at the tools ScrollTrigger gives you you can easily mark what is going on. There is no bug and there is nothing wrong, ScrollTrigger is exactly doing what you tell it to do. 

 

Debugging these kinds if things is key to understand the tools, so again try and find the issue, before you look at the answer below. Hope it helps and happy tweening! 

 

See the Pen WNLqaaO?editors=0010 by atulkumarsingh (@atulkumarsingh) on CodePen

[Atul Singh]

15 hours ago, mvaneijgen said:

Hi @Atul Singh, 

 

Before checking the answer below I advies you to take another good look at your code! It is a really simple fix and I've look at the tools ScrollTrigger gives you you can easily mark what is going on. There is no bug and there is nothing wrong, ScrollTrigger is exactly doing what you tell it to do. 

 

Debugging these kinds if things is key to understand the tools, so again try and find the issue, before you look at the answer below. Hope it helps and happy tweening! 

 

 

 

 

[Atul Singh]

@mvaneijgen Sorry, Thank you so much. I'm trying to learn GSAP. I've done my best to fix this issue, but I want the text on the left side to animate when it touches the top of the right side wall content. Have you fixed the code or not? I'm new to GSAP, and I can't find your previous answer. I apologize if I'm bothering you. I am using big monitor. On small monitor is working fine.

[mvaneijgen]

Ah sorry I'd send the wrong link. What I've done is move the end trigger on the pinning ScrollTrigger to the center, instead of "bottom" what is happening in your example is that the pinning stops when the bottom of the element hits the bottom of the screen, that is not what you want, so you have to move the end trigger to a position where it suits your animation better. Hope it helps and happy tweening! 

 

See the Pen vYvqvOp by mvaneijgen (@mvaneijgen) on CodePen