scrolltrigger ScrollTrigger - Horizontal Scroll w/ variable width sections

[Douglas 0 Likes (Newbie)]

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...

 

1. 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)
2. 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

[ZachSaucier 6,047 Likes (Superhero)]

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.

[Douglas 0 Likes (Newbie)]

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.

[ZachSaucier 6,047 Likes (Superhero)]

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?

[Douglas 0 Likes (Newbie)]

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.

[oligsap 9 Likes (Newbie)]

I would be interested in knowing how you fixed this. 

 

Thanks !

[oligsap 9 Likes (Newbie)]

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 !

[Quentin .D 0 Likes (Newbie)]

I have the same issue, thanks for your advice @ZachSaucier and your selfanswer @oligsap I will try this