Douglas Posted August 20, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 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 comment Share on other sites More sharing options...
Douglas Posted August 20, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 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 comment Share on other sites More sharing options...
Douglas Posted August 20, 2020 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 comment Share on other sites More sharing options...
oligsap Posted September 3, 2020 Share Posted September 3, 2020 I would be interested in knowing how you fixed this. Thanks ! Link to comment Share on other sites More sharing options...
oligsap Posted September 3, 2020 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 ! 2 Link to comment Share on other sites More sharing options...
Quentin .D Posted January 5, 2021 Share Posted January 5, 2021 I have the same issue, thanks for your advice @ZachSaucier and your selfanswer @oligsap I will try this Link to comment Share on other sites More sharing options...
Altea Posted January 13, 2022 Share Posted January 13, 2022 This is exactly what I need. Thanks 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now