Fixing the button when clicked and back

[Andrey75]

Hi everyone. I have a sidebar that opens and closes when a button is clicked. I want the button to be fixed when the panel is hidden, and then scroll as usual when the panel is open. I've tried various options. I understand that there should be an event when the button is clicked. A forward event is triggered when the pin is added, and a reverse event is triggered when the pin is disabled. But nothing works.

See the Pen QwKOyMK by AnChirkin (@AnChirkin) on CodePen.

[mvaneijgen]

I'm not 100% sure what you're after. But I think you just want the button to be always visible. It should scroll with the text if the sidebar is not visible and stay with the sidebar is the sidebar is visible. I don't see how these are different, just set them both to fixed and that is what you want, right?

 

Instead of creating two tweens, just create a timeline and .reverse() or .play() that based on the state of the timeline.

 

I've changed your layout a bit and removed some unnecessary code from your demo to better focus on the issue you're having. 

 

I've also placed some comments in your JS to explain certain things, be sure to read through them. Hope it helps and happy tweening! 

 

See the Pen azmVdrP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Andrey75]

Thanks for the quick response. But no. That's not quite what I need. I did what you suggested. The main goal is to hide the sidebar and increase the width of the main content if the user doesn't need the sidebar and just wants to read the text. To do this, the button moves to the left, and the main content expands.

And if this happens...

1) The button is fixed to the side, and the main content can be scrolled.

And if you click the button again, the menu opens. The button moves to the right again and doesn't lock. When scrolling, the button rolls along with all the content.

I tried setting a ScrollTrigger event when the button is clicked and the menu is hidden. It works, but not quite.

 

function BtnOptionOne() {
  btnlTl.play();
  ScrollTrigger.create({
    trigger: pinSdbrBtn,
    pin: true,
    once: true,
    pinSpacing: false,
    start: "top 15%",
    end: "max",
    markers: true,
    invalidateOnRefresh: true,
    paused: true,    
  });
};

 

But I don't think this is the right decision.

[mvaneijgen]

I don't see what ScrollTrigger is going to do in this setup. 

 

Having the button stick to somewhere is just adding some logic to it. 

 

I would still find it really weird that the button scrolls away when you've opened it, shouldn't you be able to close it again without scrolling back up?

 

I've updated some logic in the pen so that the container now takes up the full width when the sidebar is closed, but most of the logic is just the same. This is probably not yet wat you want, but it is a jumping off point for you to develop it further.  Hope it helps and happy tweening! 

 

 

 

See the Pen zxKPBRK?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[Andrey75]

1 hour ago, mvaneijgen said:

I don't see what ScrollTrigger is going to do in this setup. 

 

Having the button stick to somewhere is just adding some logic to it. 

 

I would still find it really weird that the button scrolls away when you've opened it, shouldn't you be able to close it again without scrolling back up?

 

I've updated some logic in the pen so that the container now takes up the full width when the sidebar is closed, but most of the logic is just the same. This is probably not yet wat you want, but it is a jumping off point for you to develop it further.  Hope it helps and happy tweening! 

 

 

 

 

 

Thank you very much! This is a good idea.

[Rodrigo]

Hi,

 

I'm a bit late to the party, sorry about that. If I understand correctly what you're trying to achieve, maybe is something like this:

See the Pen yyaPVEQ by GreenSock (@GreenSock) on CodePen.

 

Basically I'm using a ScrollTrigger instance to pin the button and when you click the button the ScrollTrigger is disabled/enabled:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/disable()

https://gsap.com/docs/v3/Plugins/ScrollTrigger/enable()

 

Finally I agree with @mvaneijgen on the fact that this is a bit fishy in terms of UI/UX (especially UX), since if you scroll down and then disable the button (hide the sidebar) the button gets unpinned and jumps right at the top of the screen. As a user I wouldn't be too happy if something like that happened without getting the slightest hint of where the button could've gone. In terms of UI, normally when you have a floating panel, the element that shows/hides said panel has to float with it, as Mitchell's demo shows.

 

Hopefully this helps

Happy Tweening!

[Andrey75]

15 hours ago, Rodrigo said:

Hi,

 

I'm a bit late to the party, sorry about that. If I understand correctly what you're trying to achieve, maybe is something like this:

 

 

 

Basically I'm using a ScrollTrigger instance to pin the button and when you click the button the ScrollTrigger is disabled/enabled:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/disable()

https://gsap.com/docs/v3/Plugins/ScrollTrigger/enable()

 

Finally I agree with @mvaneijgen on the fact that this is a bit fishy in terms of UI/UX (especially UX), since if you scroll down and then disable the button (hide the sidebar) the button gets unpinned and jumps right at the top of the screen. As a user I wouldn't be too happy if something like that happened without getting the slightest hint of where the button could've gone. In terms of UI, normally when you have a floating panel, the element that shows/hides said panel has to float with it, as Mitchell's demo shows.

 

Hopefully this helps

Happy Tweening!

Thank you, Rodrigo, for your comment and participation. Perhaps I didn't explain the situation well. Or maybe I'm not very confident in my English yet.)
From a UI/UX perspective, I disagree with you. I think that when a user closes a menu and the button scrolls up along with the content, it's not the best experience. Because when they want to open the menu, they have to scroll all the content up again to the button and open the menu. Therefore, the best experience is when the menu is closed and the button is always visible, allowing them to open the menu at any time. But if the menu is open, they use it, and the button can scroll along with the content. UI/UX design should primarily focus on usability and minimizing unnecessary actions.

Your example is exactly what I needed, and I realize I was moving in the right direction, but I made a few mistakes. Now the problem is solved. Thanks again to you and @mvaneijgen. You guys are dope! Thank you for your excellent work.