Horizontal scolling with expandable section

[ceribbo]

Hi there, 

I've created an horizontal scrolling on my website but I need to make a section dynamic and expandable,

Here it is an example where I tried to replicate what I have in mind:

 

 

In the example above the container's width is not updated correctly, even if I tried to update in the onComplete function. 

 

On my website I didn't declared the container width so the width is updated automatically, however when the width of the section is expanded, the scroll is not updated fluidly.

See the Pen KKYwebJ by ceribbo (@ceribbo) on CodePen

[GreenSock]

That's a pretty tricky thing because you're trying to adjust the size of the very element that you're pinning. I'd recommend creating a container that you pin, and adjust the inner element: 

See the Pen MWRwgKX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You also need to set invalidateOnRefresh: true on your ScrollTrigger if you want it to grab new tweening values from function-based values. 

 

Does that help? 

[ceribbo]

Thank you so much, sorry for the late answer but I think i figured it out, I am only having 1 more doubt:

I tried to understand the calculations of the scroll in order to keep the view in the same place, however I'm still quite confused, can I ask you to explain this to me? 

change = window.innerWidth * (expanded ? 0.25 : -0.25),
movement = containerInner.offsetWidth - window.innerWidth,
progress = st.progress * 1 / ((movement + change) / movement);
...
st.scroll(st.start + (st.end - st.start) * progress);

For example, let's say that I'd like to scroll the new expanded at the beginning of the page (I've updated my codepen in order to have more blocks) 

[GreenSock]

change = window.innerWidth * (expanded ? 0.25 : -0.25),

You were going from 50vw to 25vw (or the other way), thus that's the same as window.innerWidth * 0.25 or -0.25. 

 

movement = containerInner.offsetWidth - window.innerWidth,

That's the total distance it's moving.

 

progress = st.progress * 1 / ((movement + change) / movement);

This just maps the current progress value (0 is the very start, 1 is the very end, 0.5 is halfway through) to the corresponding progress value with the change factored in. The entire goal here is to make it seamless. Let's say it's at exactly 50% progress (0.5) and then you expand the whole thing 500px to the right, well now the current position would no longer be at 50% into that entire move. It'd less than that. So it's just figuring out the proportions. 

 

st.scroll(st.start + (st.end - st.start) * progress);

This just scrolls to the correct position to make it appear seamless.

[ceribbo]

Ok, thank you so much, pretty much everything is clear now, however, if I wanna move the scrolling so that it appears at the beginning of the viewport? 

let's say the expandable container is distant 100vw from the beginning of the scrolltrigger, when expanding the secion, I want the section to position at the beginning of the viewport (so -100vw from left), I'm struggeling to insert this variable in the calculations keeoping the scrolling seamless 

[Rodrigo]

Hi,

 

I'm not 100% sure I follow what you're trying to do, but maybe something like this?

See the Pen LYvWbQZ by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[ceribbo]

Exactly! 

The problem is that when resizing, it's glitching, I'm trying to have a seamless transition using the progress

[GreenSock]

I'm not exactly sure what you mean, but obviously if you resize it would mess with the proportions; if you're trying to keep the expanded state kinda snapping there after resizing, you could do something like: 

See the Pen BaEWZpM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

This is really beyond the scope of help we can typically provide in these free forums (lots of custom logic), but hopefully this gets you going in the right direction.