Scroll the divs within fixed div

[Boski Mehta]

Please check the codepan , i want to scroll the content between the fixed div. but as of now the div is fixed but the inner content is not scrolled.

See the Pen zYWQaOO by boskim (@boskim) on CodePen

[daniel.mt]

Hey,

 

I think that it would be a better approach to apply a scrolltrigger on each selector instead of the whole container .

 

Here is an example:

 

See the Pen eYMaLWL by danielmtd (@danielmtd) on CodePen

 

And instead of pinSpacing you can adjust the height of that container however you like. Don't forget to trigger ScrollTrigger.refresh() after changing the height ( without this the markers are thrown off and you'll not get accurate triggers ).

 

Also you have the option to pin or not the heading based on your preference.

 

Check this article:

 

[Boski Mehta]

1 hour ago, daniel.mt said:

Hey,

 

I think that it would be a better approach to apply a scrolltrigger on each selector instead of the whole container .

 

Here is an example:

 

 

 

 

And instead of pinSpacing you can adjust the height of that container however you like. Don't forget to trigger ScrollTrigger.refresh() after changing the height ( without this the markers are thrown off and you'll not get accurate triggers ).

 

Also you have the option to pin or not the heading based on your preference.

 

Check this article:

 

Hey daniel thanks for the replay. But i want to scroll them in the fixed div. like this site https://lightmatter.co/

[daniel.mt]

Hey,

Came back with a change. This is what you're looking for ?

 

See the Pen xxWowrp by danielmtd (@danielmtd) on CodePen

 

Also the example you given it's more of a hooking a timeline to the scroll and scrubbing it. There are quite a few examples in here: https://greensock.com/st-demos/ that can help you achieve this. How I'd tackle a problem like this is:

 

- creating a timeline

- debugging it using gsDevTools

- creating the scrolltrigger and addig the animation to it.

 

 

 

[Boski Mehta]

On 8/26/2022 at 3:00 PM, daniel.mt said:

Hey,

 

I think that it would be a better approach to apply a scrolltrigger on each selector instead of the whole container .

 

Here is an example:

 

 

 

 

And instead of pinSpacing you can adjust the height of that container however you like. Don't forget to trigger ScrollTrigger.refresh() after changing the height ( without this the markers are thrown off and you'll not get accurate triggers ).

 

Also you have the option to pin or not the heading based on your preference.

 

Check this article:

Hey daniel thanks for the replay. But i want to scroll them in the fixed div. like this site https://lightmatter.co/

Hi Daniel , But the scrollable content moves over the heading which is not correct the scrollable items should changed at their places. 
I have checked the https://greensock.com/st-demos/  link buit did not find any demo regarding this..
Can you please assist me to fix this issueor share the demo link

Thanks

[GSAP Helper]

Hi Boksi - Daniel's offered quite a lot of help now and it's not really clear what your goal is.

These forums aren't for people to build out demos according to lists of requirements. The people helping here are very kindly volunteering their time, but can't keep making demos until they get it right!

 

I suggest you pop over to the ScrollTrigger docs and watch the explainer video at the top of the page.

If that doesn't help here's a guide to asking a clear question

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code necessary to show the issue.

 

 

[Boski Mehta]

Hi ,

I goal is simple fix the div untill the inner div content reaches to end. Check the video https://www.loom.com/share/99d2386293c7439db61fac8daec3109b

as of now i have added the vertical slider but that is not working with fixed div.

 

[daniel.mt]

The easiest approach is to move the heading html inside "vertical-scroll-inner". Those boxes are stationary and have only opacity applied. The only thing moving is vertical-scroll-inner div. I adjusted the original codepen quoted above.