Filip3000

Wow @mikel, this is great! I really appreciate your help, thank you very much - this is exactly what I was trying to do. And thank you @GreenSock for you input as well.

Oh, nice - thank you for the margin fix! But my main problem is that I want to specify "duration of the scene" (using ScrollMagic analogy). I want to pin the section for the duration of the scroll needed to get to the 100% width of the bar without the extra padding below (so that my layout is the same with or without GSAP, scroll only affects the sections with the bar - animation on scroll, no extra padding).

@GreenSock Thank you for your reply. I actually managed to do so and it seems like it matches your advice. Can you give me any tips on how to properly "lock" the end marker so I could pin the section without the extra padding below?

I'm trying to build a "progress bar" within the section that will be pinned until the bar reaches the end of the window (100% width) without the pin-spacer padding. The bar should also reveal (opacity: 1) a step/item when it goes through it. I hope the codepen example is clear enough. Thank you for your help! Edit: I managed to deal with the opacity part.

Ah ok, sorry for wasting your time on this - I was just tired I guess. It was just a matter of controlling the end position with endTrigger - thank you for you patience. 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? https://codepen.io/filip3000/pen/JjXMJdG

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? 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.

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. https://codepen.io/filip3000/pen/JjXMJdG

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: 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). 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!

Hello @Visual-Q I understand, sorry for the confusion. I decided to post my question here because I was convinced that it is basically the same problem (also the OP is using scrollMagic). Thank you for your answer, I'll take a look at the article. Cheers!

I have a trouble replicating this with absolute positioning (see the CodePen, scroll to trigger the fade). Could you please help me transform the code to work with a loop? https://codepen.io/filip3000/pen/JjXMJdG