Unpinning element at a certain div's start & pinning fixed element when it 'covers' the same element below

[Filip3000]

Hello,

 

Is it ok if I provide a link to a website instead of the code? I'll try: https://pk.domenapodtesty.pl/wyjazdy-i-warsztaty/resilience-retreat-3/. Here is what I'm trying to achieve:

1. Sidebar nav [deskotop]: pinning works fine, but I'd like to unpin it at a start of a certain div (at the title "Inwestycja" level to be exact).
2. Right now I have a fixed button at the top of a page (it shows up after a short scroll). Right before the footer/recent post section there is the exact same element and what I want to do is to pin the fixed button when it 'covers' the second button. To be exact when the top edges of both elements connect. Hope it's clear enough.
    

Thank you for your help!

[ZachSaucier]

Hey Filip.

 

10 minutes ago, Filip3000 said:

Is it ok if I provide a link to a website instead of the code?

The reason why we request minimal demos using something like CodePen is because:

• They are much easier to view the code
• They force users to cut out all of the superfluous stuff, allowing us to focus on what they're really asking about
• They are easier to fork

We don't just ask people do to it so they have to do extra work — it helps them figure out what's going wrong and saves our time  

 

11 minutes ago, Filip3000 said:

pinning works fine, but I'd like to unpin it at a start of a certain div

So long as your start and end positions are what they need to be that should work conceptually. But if you're having trouble it'd be good to create a minimal demo of the situation.

 

12 minutes ago, Filip3000 said:

pin the fixed button when it 'covers' the second button

Again, that's just a matter of figuring out what start value you need. If you are having trouble please make a minimal demo  

[Filip3000]

That's how you politely tell someone to stop being lazy!  

 

Ok, here is the code. I understand that's basics, but just want to make sure I'm doing it right.

Let's say I'd like to end the pin when nav reaches the 2nd sec. And I also added the fixed div.

 

See the Pen JjXMJdG by filip3000 (@filip3000) on CodePen

[ZachSaucier]

2 minutes ago, Filip3000 said:

here is the code. I understand that's basics, but just want to make sure I'm doing it right.

What you have is acceptable. Does it accomplish what you want it to accomplish? If not, what about it is not right? And where are you getting stuck when you try to accomplish it?

[Filip3000]

1. When it comes to unpinning the nav element when it reaches section 2 (in the codepen) I understand I have to change the 'end' property and attach it to my element (in this case section 2). But I can't just put class or ID there, right? How to do it?
2. When it comes to the fixed bar, again it's a matter of what start value I need. I just don't know how I can point to specific place other than e.g. 'top top' etc.

[ZachSaucier]

37 minutes ago, Filip3000 said:

I understand I have to change the 'end' property and attach it to my element (in this case section 2). But I can't just put class or ID there, right? How to do it?

There are multiple ways to do it, but my bet is that the best is to make use of the endTrigger property as well which you can read about in the docs.

 

37 minutes ago, Filip3000 said:

I just don't know how I can point to specific place other than e.g. 'top top' etc.

If you want to use an element as the start point, use the trigger property and then do something like that. If you want to use an absolute position, use a numerical value. You could also use a function. Again, all of this is found in the docs  

 

If you still can't figure out what you need, create a minimal demo that clearly shows where you're wanting things to start and/or end and we can help you out.

[Filip3000]

Ah ok, sorry for wasting your time on this - I was just tired I guess.

1. It was just a matter of controlling the end position with endTrigger - thank you for you patience.
2. Here I'm fading away the button on the right trigger, BUT I'm not sure why the element doesn't show up back with toggleActions (also the markers won't show up - not sure why either). From what I understand the fade should reverse. What am I doing wrong?

See the Pen JjXMJdG by filip3000 (@filip3000) on CodePen

[ZachSaucier]

5 hours ago, Filip3000 said:

I'm not sure why the element doesn't show up back with toggleActions

The dev tools console tells you clearly with a warning:

Invalid property toggleActions set to play none reverse none Missing plugin? gsap.registerPlugin()

You're putting the ScrollTrigger vars in the tween vars. You need to have a ScrollTrigger vars object if you need additional properties besides the trigger. But your start and end positions don't make much sense for that. I'd probably use end: "bottom bottom". And/or switch out your toggle actions to toggleActions: "play none none reverse".

See the Pen GRNBPax?editors=0010 by GreenSock (@GreenSock) on CodePen