Share Posted August 20, 2020 I'm building a site with horizontal scrolling for the whole site, but have been having a heck of a time doing the whole timeline pretty manually. I'd LIKE to have just a single foreach() which looks for all the <section>s on the page, and animates them one by one, like I have in this codepen: Problem is, as you can see, I'm currently adding them to the timeline one at a time, and using some basic math to say "this section is 60% viewport width, so start the NEXT animation at "-=" + 1.4 (duration of previous "out" animation, + (100 - {%width of previous section}). Issue being that the site is CMS driven and may... Completely lack the "previous" section that I intended (maybe the content manager doesn't put any content into a section, so we don't want to show it) Be over 100% viewport width I've had a quick go of it but as you'll see looking at my next codepen, I'm running on fumes here. Here's that attempt: See the Pen eYZBZvM by DouglasGlover (@DouglasGlover) on CodePen So basically I'd like the first codepen I referenced above, but IDEALLY it'd work with a single foreach, and the sections should be able to be ANY width, or NOT EXIST at all, without breaking the whole timeline. Any help at all would be appreciated; I'm sure this is possible but I've been working basically nonstop on this site and it's running me ragged, so if anyone at all could provide a nudge in the right direction even that'd be amazing. See the Pen gOrwbGV by DouglasGlover (@DouglasGlover) on CodePen Link to post Share on other sites
Share Posted August 20, 2020 Hey Douglas. Is there any reason why you can't just put all of your sections in a container and animate the container instead? That way you just have one ScrollTrigger and animation. It'd also work no matter what widths or how many sections you have. Perhaps I'm misunderstanding your end goal. Link to post Share on other sites
Author Share Posted August 20, 2020 Hey @ZachSaucier thanks for the quick response. Unfortunately in simplifying my example I didn't provide some technically important info. I need to be able to do what I describe in between sections that have parallax and other effects. Basically I'd do this in between custom scrolling animations. That said maybe your proposed solution works anyway, technically. I may simply be having trouble wrapping my head fully around the duration/position concepts. It feels like a bit of a struggle to position the animations among each other in the ways I need to do so. Link to post Share on other sites
Share Posted August 20, 2020 I suppose I don't have a good understanding of what your end goal is. Is there a site or video that you're using as a reference? Link to post Share on other sites
Author Share Posted August 20, 2020 5 minutes ago, ZachSaucier said: I suppose I don't have a good understanding of what your end goal is. Is there a site or video that you're using as a reference? I'll PM you, if that's ok. Link to post Share on other sites
Share Posted September 3, 2020 I would be interested in knowing how you fixed this. Thanks ! Link to post Share on other sites
Share Posted September 3, 2020 Ok so I think I managed to solve it - like this : See the Pen GRZORvX by olig (@olig) on CodePen Code: const sections = gsap.utils.toArray("section"); let maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 1, end: () => `+=${maxWidth}` } }); I'm not really sure if my code is optimized so critics welcomed ! 1 Link to post Share on other sites
Share Posted January 5 I have the same issue, thanks for your advice @ZachSaucier and your selfanswer @oligsap I will try this Link to post Share on other sites