scrollTrigger issue with panels movement and placement

[Ellie_]

Hi guys, this is my first time here, I need some help for this issue:

 

 I have been through documentation, example etc. I created this animation using the examples of the horizontal scroll provided in the docs,  the thing is that it worked ok with 3 panels but when I add more panels I notice the setting used in the xPercent

xPercent: -100 * (sections.length - 1),

 doesn't work very well, as if I use more than 7 panels the last one doesn't show completely and starts showing less and less at the time yo continue adding panels, I need to have a margin between panels as is set, and a margin left and right of the container as is set too, I know this is affecting somehow but I'm unable to figure out how to recalculate this things to make it work either with 3 panels or 25 for example.

Also the last panel should always be at the center of the screen, making a perfect match with the pictures below.

 

I tried to change the end but it always ends at the same point, I tried to change the xPercent from 100 to 102, 103, 105 but that doesn't work either if I use less or more panels, it gets to a point that won't work with an extra panel or with less panels...

 

 anyone can throw some light on how to solve this? 

 

Thanks a lot in advance!

 

Please open codepen in desktop version to see it better

 

See the Pen KKaRaGV by elenadw (@elenadw) on CodePen

[akapowl]

 

Hello and welcome to the forums @Ellie_

 

I think the issue here is that xPercent will refer to the width of your .panel and you have margins set to those which will (with regard to the box-model logically) not be respected in your setup - so as I see it, you have two options:

 

1) Either change your setup

 

or 2) incorporate the margins in your calculations - for example by using an x-tween instead of an xPercent-tween.

 

 

When it comes to having the last image ending up centered with the image below / in the center of the screen, that again boils down to calculating things properly (also not forgetting to incorporate the margins in your calculations - here also the margin you have set on the .projects-horizontal).

 

It's not that easy to wrap your head around at first but it gets easier the more you think about it.

 

For what you want, this seems to work quite right

 

x: - ( (document.querySelector(".panel").offsetWidth + 100) * (sections.length - 1) - ( ( (window.innerWidth - 100 - 60) / 2 ) - ( document.querySelector(".panel").offsetWidth / 2 ) ) )

 

 

In this codepen I also made use of functional values and added invalidateOnRefresh: true to your ScrollTrigger, so it'll respond to resizes nicely. Also I wrapped all that in a window load event to make sure the images are loaded before setting up your ScrollTrigger because else, things can be thrown off, too.

 

Hope this helps.

Cheers,

Paul

 

See the Pen 54d296b85fc0882623263a3de484fb0a by akapowl (@akapowl) on CodePen

 

 

Edit:

 

Also, you might want to consider using

 

end: () => "+=" + ( document.querySelector(".projects-horizontal").scrollWidth )

 

instead of 

 

end: () => "+=" + (document.querySelector(".scrolling-project").offsetWidth)

 

to keep the speed of the horizontal scroll consistent. The way you have it now will result in the tween being fast and faster the more images you add in your HTML.

 

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