Jump to content
GreenSock

Boski Mehta

Scroll the divs within fixed div

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

 

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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. 

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×