Jump to content

steen hjalmar larsen

vetical and horisontal scrollTrigger

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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 => {
    trigger: panel,
    snap: 0.5

Is that what you want?:

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


  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
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.