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
scrollTrigger issue with panels movement and placement
in GSAP
Posted
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
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