Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Douglas

ScrollTrigger - Horizontal Scroll w/ variable width sections

Recommended Posts

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

Link to post
Share on other sites

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

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

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

I would be interested in knowing how you fixed this. 

 

Thanks !

Link to post
Share on other sites

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 !

  • Thanks 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×