Horizontal scroll animation with sections of different sizes.

[claraapta]

Hi! I was using the Horizontal Scroll that was working perfectly, but then the child divs (sections) have different sizes and the Scroll started to break. How do I adapt my code for this?

See the Pen eYowKax by Maria-Clara-Ramalho-Medeiros (@Maria-Clara-Ramalho-Medeiros) on CodePen

[mvaneijgen]

Hi @claraapta welcome to the forum!

 

As with anything in GSAP everything starts with an animation, so if the animation is not working it will never work on scroll. For now I've disabled ScrollTrigger in your demo, but be sure to enable it again when you think everything is correct. In the demo below we just get the total width of all the sections add together and use that as your x value. Bonus point for using a function based value https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values so that it gets recalculated on resize. 

 

Hope it helps and happy tweening! 

 

See the Pen XWQLBzJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[claraapta]

Hi, thanks for the reply! From what I understood, the animation makes it go all the way to the end of the element, right? What I'm trying to do is a horizontal scroll of the divs marked as sections and the problem I'm facing (I think I forgot a line in the demo above) is that when I have different values for the sections, for example, the middle section (the purple one) is larger than the others, there's a white space between the purple section and the blue section. Could you tell me what's causing this bug?

[GreenSock]

That's because you're using xPercent which is based on the width of each element. For example, xPercent: 100 would be a different number of pixels for an element that's 200px wide vs. one that's 500px wide. 

 

I think you meant to do something more like this, right?: 

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

 

It just involved using pixels instead of percentages. 

[claraapta]

20 minutes ago, GreenSock said:

That's because you're using xPercent which is based on the width of each element. For example, xPercent: 100 would be a different number of pixels for an element that's 200px wide vs. one that's 500px wide. 

 

I think you meant to do something more like this, right?: 

 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

 

It just involved using pixels instead of percentages. 

Omg, that was exactly what I wanted! Thank you!