ScrollTrigger Horizontal slide with a single smaller panel

[Ian Robinson]

Stripped a project back to basics and rebuilding an element at a time. Now I've spent a couple days trying to figure this one out but keep hitting roadblocks (or CodePen crashing on me for some reason). Attempting to add in a div of a smaller size than the others but only managed to partially get it to work – I have the gap, but the panel moves at a different rate. I found a snippit along the lines of 

x: () => `-${maxWidth - window.innerWidth}`,

but obviously it's only a small piece of the puzzle and feel I'd have to rebuild what I did to make it work so trying to figure out if it's the only option or if what I have can be edited relatively easily to accomodate.

See the Pen mdqyOxL by ilrobinson (@ilrobinson) on CodePen

[OSUblake]

Hi Ian, 

 

I've read your posts several times, but I'm still unclear about what you're asking. Can you elaborate some more about what you are trying to do and what the pen you posted is not doing. Thanks!

[akapowl]

12 hours ago, Ian Robinson said:

Attempting to add in a div of a smaller size than the others but only managed to partially get it to work – I have the gap, but the panel moves at a different rate.

 

It is to be expected, that they move at a different rate, because the xPercent is related to the element's width. You're telling each element to move to the left for a specified amount of its own width so to say - which will be different with different width's of each element, so they will get out of sync.

 

See the Pen WNXbLMX by akapowl (@akapowl) on CodePen

 

 

 

The approach you are using only really works like that when the panels all are a window's width wide.

 

If you need to have sections with different widths, you will be better off tweening the x of either the individual sections like for example in this approach from the demo section...

 

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

 

 

...or a wrapping container element, something like in this example.

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen

 

[Ian Robinson]

Thanks again akapowl (I believe you helped me with my previous issue as well)! But yes, you addressed my questions as I was pretty sure I could work it out if I rewrote the whole thing as you implied, but wanted to know if it was possible with just a couple adjustments/edits to the code I already had.