[ScrollTrigger sidebar pinned overlaid sections]

Thanks @akapowl, I appreciate the effort you've made he! Plus your explanation really helps me understand the rationale

[ScrollTrigger sidebar pinned overlaid sections]

@akapowl I'm just see 2 codepens. In the original post there are 7, and it's the 6th one I'm needing.

 

[ScrollTrigger sidebar pinned overlaid sections]

Okay that was weird, now I see that it jumped from here

 

[ScrollTrigger sidebar pinned overlaid sections]

@akapowl Is it possible to reinstate these codepens too? They are more in line with what I'm looking for

[ScrollTrigger sidebar pinned overlaid sections]

Truly appreciate that @akapowl. Forever the superstar! 😎

[ScrollTrigger sidebar pinned overlaid sections]

Hey @akapowl, just wondering where the codepen examples above have gone? Is it possible to either reinstate them or add?

[Magnetic cursor]

@OSUblake Sorry Blake, I have another question. Is it possible for the ball to interact with the cursor on scroll? At present the cursor has to move before the ball sticks to it. 

[Magnetic cursor]

After your kind help Blake, here's the project in progress. I just need to embed  youtube video into the container, then link the button to it

 

See the Pen zYNLQaM by Jase2018 (@Jase2018) on CodePen

[Magnetic cursor]

Me neither. I found the example on a random codepen. Thanks very much for your help Blake, this makes so much more sense to me now

[Magnetic cursor]

haha, good question! Yes I have, but as the area is using negative parameters I'm not sure how to fill the section. The idea is that the section will contain an embedded youtube video, and the round button will be used to play and pause the video. Ultimately I'll need this button to toggle text values of 'play' and 'pause'.

[Magnetic cursor]

I'm trying to find a way of forming the magnetic area for the circle on this GSAP magnetic cursor. Currently the area is only within the square box with the dotted outline. I want to make the whole grey section the magnetic area. Ideally I want the circle to ‘become’ the cursor when you hover over the section. 

See the Pen xxgJyPM by Jase2018 (@Jase2018) on CodePen

[Layered pinning followed by standard scrolling content]

@Shehzad Thanks so much for your advice Shehzad. I’ve found that mixing the two isn’t always the best choice, especially with pinning. The layered pinning actually works quite well in my LS container (without using data-scroll-section), but find the rest of the page content can be a little bit choppy. I wasn’t aware of the loco pinning method, are you able to share some info on this?

 

[Is there a way of reversing the direction of text when scrolling back up?]

 Thanks very much for all your help on this, I'll experiment with the example :)

[Is there a way of reversing the direction of text when scrolling back up?]

Thanks Mikel, I appreciate the example but it’s not what I’m looking for I don’t think. I was hoping that gsap could help make it easy to scroll up and down with interchanging horizontal text direction. In the example I’m having to click a button to change direction. 

[Is there a way of reversing the direction of text when scrolling back up?]

Really appreciate your efforts but the text is now static when not scrolling horizontally. The text should always be moving slowly in the direction that is dependant on browser scrolling up or down.

[Is there a way of reversing the direction of text when scrolling back up?]

Thanks for your response Brian. Yeah not sure how to implement the scrub into my codepen to make this work. Are you able to elaborate with a codepen mockup? I truly appreciate how help you can offer. 

[Is there a way of reversing the direction of text when scrolling back up?]

I've seen a few examples were text automatically scrolls to the left when scrolling down the page, and then reverses direction when scrolling up the page. I spotted this example in one of your posts to give you a visual representation. 

See the Pen qLxwPy by mikeK (@mikeK) on CodePen

[Layered pinning followed by standard scrolling content]

Ahh shucks. Well thanks for all your help on this and for the additional info. Makes sense.

[Layered pinning followed by standard scrolling content]

Thanks for your help. Wasn't sure whether to use the negative margin or use the  ScrollTrigger.matchMedia().

Your solution works brilliantly, however, I wanted to keep the div data-scroll-section in place so it is inline with the scroll library specs. When I try to add this format back into your example, it fails to work. I can't complain through, so thank you

[Layered pinning followed by standard scrolling content]

How would I go about adding normal scrolling content after some layered pinning sections? I have tried adding a new section outside of the trigger div but the screen is going white and not showing the added content area.

See the Pen JjEpaqd by Jase2018 (@Jase2018) on CodePen

[Can this effect be achieved using ScrollTrigger?]

I appreciate that this isn't a gsap question but I'm going to be adding an accordion to one of Layered Pinning Panels. Once the accordion opens, the scroller needs to resize the window in order to compensate for the height adjustment. I just can't figure out the eventListener for the accordion... Any help very much appreciated

 

See the Pen JjERGog by Jase2018 (@Jase2018) on CodePen

[Can this effect be achieved using ScrollTrigger?]

Thanks very much for the advice, I'll take heed

[Can this effect be achieved using ScrollTrigger?]

I have a question regarding the ScrollToPlugin. I want to be able to scroll to the anchor so that the point at which it stops is at the top of the screen rather that simply anchoring to an entire section.

 

See the Pen MWJKjPe by Jase2018 (@Jase2018) on CodePen

[Can this effect be achieved using ScrollTrigger?]

Amazing! Thank you kindly, I truly appreciate your help

[Can this effect be achieved using ScrollTrigger?]

Although it looks good on mobile too, I may consider disabling it on anything below 768px wide. What would be the best way to do this? Thanks in advance