ScrollTrigger timeline for multiple horizontal scroll

[Gulam Chaudhary]

Hi,

 

I am new to GSAP and i am trying to fix something from last two days but no luck.

 

In the given example there are two rows each scrolling horizontally one after another. Each section for the row has one dive element which is scaling with different timeline with scrollTrigger. Don't know what to be done to animate the child elements for row two once it start scrolling.

What i have noticed that all row two div are animating with row one timeline even though there is separate timeline for row two.

 

Please help me with this, i am really having a hard time solving this.

See the Pen vYxRxWe by gulam-mustafa (@gulam-mustafa) on CodePen

[Visual-Q]

I'm sure someone can come along to help you set this up better as I haven't had much time to spend with scrollTrigger yet but I think I can shed some light on what's happening, your start and end positions for the divsOne and divsTwo are in the same place and not accounting for the elements being in different positions, you can see this if you show markers on the divsTwo in your pen the starts and ends have already come and gone before the elements are even on the screen.

 

In this pen I accounted for the divsTwo position after the first section's pin spacer. I don't say this is a good solution for this, just illustrating what's happening.

var parentOffset = chOne.scrollWidth - document.documentElement.clientWidth + window.innerHeight;


start: () => parentOffset + start + (elWidth * 0.5),
end: () => parentOffset + start + (window.innerWidth),

 

 

See the Pen poeLdRd by Visual-Q (@Visual-Q) on CodePen

[GreenSock]

Yep, @Visual-Q is exactly right about the fact that you're setting your start/end values identically for both. And remember, when you use a NUMBER for start/end, those represent ABSOLUTE scroll positions. 

 

There are several solutions:

 

1) Use relative values

// BAD:
trigger: parent,
start: () => start + (elWidth * 0.5),
end: () => start + (window.innerWidth),

// GOOD:
trigger: parent,
start: () => "top top-=" + (start + (elWidth * 0.5)),
end: () => "+=" + window.innerWidth,

Now it's based on the trigger element's top hitting the top of the screen and then you're offsetting it by the appropriate amount from there. 

 

2) Don't use scrollTriggers at all for the squares - put those animations into your timeline that has the scrollTrigger

Then it's all baked into one animation that scrubs. You'd just need to figure out the ratios and where to place things in the timeline (time-wise) so that they're getting triggered at the right time/position. This is what I usually do. 

 

Also, a few tips...

 

You don't need to ever use document.querySelectorAll() - just use gsap.utils.toArray():

// long/inefficient
gsap.utils.toArray(document.querySelectorAll(".container-horizontal.two div"));

// better
gsap.utils.toArray(".container-horizontal.two div");

 

If you only have one tween in your timeline, there's no point in creating a timeline at all - just use a tween: 

// long
const tl = gsap.timeline({
  scrollTrigger: {
    ...
  }
});
tl.to(...);

// simpler
gsap.to(... {
  scrollTrigger: {
    ...
  }
});

Happy tweening!

[Gulam Chaudhary]

3 hours ago, Visual-Q said:

I'm sure someone can come along to help you set this up better as I haven't had much time to spend with scrollTrigger yet but I think I can shed some light on what's happening, your start and end positions for the divsOne and divsTwo are in the same place and not accounting for the elements being in different positions, you can see this if you show markers on the divsTwo in your pen the starts and ends have already come and gone before the elements are even on the screen.

 

In this pen I accounted for the divsTwo position after the first section's pin spacer. I don't say this is a good solution for this, just illustrating what's happening.

var parentOffset = chOne.scrollWidth - document.documentElement.clientWidth + window.innerHeight;


start: () => parentOffset + start + (elWidth * 0.5),
end: () => parentOffset + start + (window.innerWidth),

 

 

 

 

Thanks this will help

[Gulam Chaudhary]

1 hour ago, GreenSock said:

Yep, @Visual-Q is exactly right about the fact that you're setting your start/end values identically for both. And remember, when you use a NUMBER for start/end, those represent ABSOLUTE scroll positions. 

 

There are several solutions:

 

1) Use relative values

// BAD:
trigger: parent,
start: () => start + (elWidth * 0.5),
end: () => start + (window.innerWidth),

// GOOD:
trigger: parent,
start: () => "top top-=" + (start + (elWidth * 0.5)),
end: () => "+=" + window.innerWidth,

Now it's based on the trigger element's top hitting the top of the screen and then you're offsetting it by the appropriate amount from there. 

 

2) Don't use scrollTriggers at all for the squares - put those animations into your timeline that has the scrollTrigger

Then it's all baked into one animation that scrubs. You'd just need to figure out the ratios and where to place things in the timeline (time-wise) so that they're getting triggered at the right time/position. This is what I usually do. 

 

Also, a few tips...

 

You don't need to ever use document.querySelectorAll() - just use gsap.utils.toArray():

// long/inefficient
gsap.utils.toArray(document.querySelectorAll(".container-horizontal.two div"));

// better
gsap.utils.toArray(".container-horizontal.two div");

 

If you only have one tween in your timeline, there's no point in creating a timeline at all - just use a tween: 

// long
const tl = gsap.timeline({
  scrollTrigger: {
    ...
  }
});
tl.to(...);

// simpler
gsap.to(... {
  scrollTrigger: {
    ...
  }
});

Happy tweening!

Thanks, will optimize it more and more as per your suggestion.

I have multiple tweens in each section. I was trying to build a minimal demo but kept the variable same.