Jump to content
Search Community

vetical and horisontal scrollTrigger

steen hjalmar larsen test
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

  • 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

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.
  • Create New...