Boski Mehta Posted August 26, 2022 Share Posted August 26, 2022 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 1 Link to comment Share on other sites More sharing options...
daniel.mt Posted August 26, 2022 Share Posted August 26, 2022 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 More sharing options...
Boski Mehta Posted August 26, 2022 Author Share Posted August 26, 2022 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 More sharing options...
daniel.mt Posted August 27, 2022 Share Posted August 27, 2022 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. 2 Link to comment Share on other sites More sharing options...
Boski Mehta Posted August 29, 2022 Author Share Posted August 29, 2022 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 More sharing options...
GSAP Helper Posted August 29, 2022 Share Posted August 29, 2022 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 More sharing options...
Boski Mehta Posted August 29, 2022 Author Share Posted August 29, 2022 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. Link to comment Share on other sites More sharing options...
daniel.mt Posted August 29, 2022 Share Posted August 29, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now