vetical and horisontal scrollTrigger

[steen hjalmar larsen]

Trying to build a horizontal and a vertical scrollTrigger
1.The first scrollTrigger ".container-panel" should animate two div box vertically
2. The next scrollTrigger ".panel-wrapper" should animate a row of boxes horizontally
The horizontal animation works fine, but the vertical animates only the first box?
What am I doing wrong?

Incidentally, I have a little doubt about what is best in practice in relation to the horizontal scrollTrigger's end property
a. than: "+=3500"
b. end: "+=" + panel.reduce((p, c) => p + c.offsetWidth, 0)

See the Pen abYVYJz?editors=1111 by shl (@shl) on CodePen

[Cassie]

Hey there!

 

You only had one panel before the horizontal section in the HTML?

Maybe you just want to add another?

See the Pen MWVOGzJ by GreenSock (@GreenSock) on CodePen

And yeah you can change the end position to anything you like - often people will calculate the width of the panel they're scrolling.

[steen hjalmar larsen]

Hi Cassie
Thanks for the quick response
I have two panels with class="container-panel" both of which I would like to animate with ScrollTrigger
One panel is at the top of the page, the other at the bottom
The problem is that only the first one gets animated

[steen hjalmar larsen]

Think I found a solution, although it's not quite dynamic
If someone has a way to automate the process, e.g. with a loop, I would greatly appreciate it
Tried myself without success

See the Pen KKoyxNw?editors=1111 by shl (@shl) on CodePen

[GreenSock]

I don't really understand what you mean by "animate" - do you just want to apply snapping to those panels? If so, you could probably simplify it by adding a class like "panel-snap" to any panel you want to snap, and then:

gsap.utils.toArray(".panel-snap").forEach(panel => {
  ScrollTrigger.create({
    trigger: panel,
    snap: 0.5
  });
});

Is that what you want?:

See the Pen RwMjXeE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[steen hjalmar larsen]

Thank you very much for your solution, it works
I had tried something similar, but had set snap to 1, which was the problem
Obviously a little confused about how snap works

[GreenSock]

Yeah, you had the ScrollTrigger area start when the TOP of the element hits the BOTTOM of the viewport, and then your end was the opposite, thus when it's filling the viewport perfectly, that'd be 0.5. When it's out the top, it'd be 0. When it's out the bottom, it'd be 1. 

 

Glad it helped.