Something Strange

Hi @mvaneijgen! Sorry for such a delayed reply - this project I'm on is massive, had to prioritize 100 other site features before I could try out your advice, hah. On that note, I got it working today! And yes, starting simple as you suggested was the advice I needed, thank you!

Hi all, thank you in advance for checking out my post! I have a video reference of what I'm trying to achieve here: https://assets.codepen.io/191332/comp.mp4 And here is the Codepen demo I have started. Note: Please view Codepen in a new tab / window and view in Full mode or increase the Codepen panel height to have a better visual of what is going on, ha! I'm stuck on understanding a few things in my forEach loop of text blocks (right column)... As noted in purple for each block, as the video shows, I'm trying to expand / show the first text block and collapse the other two. Then as I scroll into the second block, collapse the first and last block. As I scroll into the last block, collapse the prior two blocks, and keep this block expanded as you continue to scroll down the page. And two more things: Is there a way to get the current self.progress / percent value for each block so I can animate their progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub. For the 3 text bocks, is it possible to pin or hold longer on the first block, say 50% of the timeline progress, and then the other two blocks for 25% each? Hope this demo and video make enough sense and any help to point me in the right direction is beyond appreciated! Thank you all so much!

Right on, thanks for the quick idea!

Hey @GreenSock, Correct, you made sense of my words, hah! I will check out the Observer plugin (never used this one yet). I like the idea of tweening the scrollLeft value... If you happen to think of any demos that does something similar to this idea, please shoot over a link. And if I come up with some solution, I'll post a follow up demo of course. Thanks for the quick reply. Tween yeah!

Hi all, I see a ton of demos about pinning a horizontal section to allow you to scroll vertically through a horizontal section, but is there any way to skip the pinning part, and going way back to the basics - just add a smooth scroll to an inner div with overflow-x: scroll? I'd like to just scroll normally / native up and down the page, but when you're over the blue section, allow you to smoothly scroll left to right. Again, I'm not trying to pin or allow you to scroll up and down to go through this section. Thanks!

Hi @mvaneijgen, Thank you for this extra demo! Pushed me in the direction and so I forked this to make some adjustments... This now allows html, body {overflow: hidden} and I added the invalidateOnRefresh: true to the ScrollTrigger so on our window resize event, our calculations update. Resize the height of the demo panel and you'll see everything resets and scrolls smoothly! https://codepen.io/something-strange/pen/RwERKoX

Hi @mvaneijgen, Sorry to bug you again, ha, but I noticed two other things that may lead to this padding issue... As I scroll down the scrollbar thumb actually increases in height as you near the bottom, and when you scroll to the top it decreases, meaning the height of something appears to be changing on scroll? And if you scroll to the bottom really fast to leave that larger gap, pause for it to stop animating, then scroll back up a little bit and as soon as the red block hits the bottom of the viewport, it re-animates / scrubs again... not sure if my words make sense here, hah. Anyhow, I'll keep debugging this. Thanks!

Hi again, @mvaneijgen I forked your demo above and cleared the margins to see if that was an issue for that padding deal at the bottom. That wasn't the issue though, hah. But this is weird - if you scroller really really slow as you near the bottom, it almost lines up at the end, but if you scroll really fast to the bottom, you end up with a much larger gap. I'll play around with this, but if you have any other ideas on this, please let me know, hah. Thanks again! https://codepen.io/something-strange/pen/eYbzpbL

Hi @mvaneijgen! Thank you so much for this new demo and great explanation! That would explain why I was scrolling "twice as far" haha. And thank you for this new demo with the color backgrounds, I totally see what's happening now. Cool!!

Hi all, I'm working on a project that has a locked (fixed) modal overlay that will have some scrolling fun of its own. Since this is an overlay to the site, I'm not using the typical document.body scroller by default. For simplicity, my demo here is just a fixed inner div with it's own overflow-y content to scroll and the html, body are set to overflow hidden. I'm setting the heights dynamically (as content in this div will be unknown) with a window resize event to calculate the new "y" and "end" value for this ScrollTrigger. But, my "end" function value (and/or "y") is not correct, as I can scroll way past the last red box... almost twice as far as the height of the content...hmm? I'm a little confused on what I should be calculating for the "y" and or "end" values here. Any help is appreciated, thank you for your time!

Hi all, I ended up solving my own problem (for now at least) by grouping my "items" or "columns" into a set. With this approach, I can add 1 or many blocks within a column, and the number of columns will make a set. Now I just made a clone of the set to ensure the two sets will be wider than the window screen / viewport. Cleaned up the JS, my window resize event only needs the width of the one set, and the total width is just the set width * number of sets, in this case, only 2. Similar to Fabio's original Codepen demo, but now we can have our set built with any range of widths: https://codepen.io/something-strange/pen/eYKBypL

Thanks @Rodrigo, appreciate the link! Looking at these examples, they seem to have way too many options and configurations, hah. I think the idea I have in place with the gsap.utils.wrap is close, I need to find a way to get the width of the previous or next siblings width kind of like this: Or do you think this will just not work with dynamic widths? Oh, I could maybe group all of my items as one big set and clone that twice so I have a previous, current and next set all width the same widths, but that might be a bit off excess rendering for the DOM out of the viewport... Just typing out loud, I'll mess around with this more and provide any updates. Thanks again!

Hi all, I've tried my best to find a solution before submitting a potential duplicate question... I forked an incredible pen from Fabio Ottaviani and simplified my version a bit more for demo purposes. All works well initially, but if you uncomment the CSS lines 62-64 (making even nth-children skinnier), things break, ha. In my JS, I'm setting the widths of each item (and the new wrapper total width) in my window resize event. I thought in the dispose function, specifically in the gsap set x, I would use the current item's width with the index in the array of widths, and then in the modifiers x, I would need to use the negative last item's width and first item's width to get the correct wrap, but I'm obviously not doing that right. Any suggestions would be much appreciated! Thank you for your help and time.