Jump to content
Search Community

Problems with Scrolltrigger

clau2 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi guys, I'm relatively new to gsap animations and I've been trying to get this horizontal scroll trigger to work. I watched some tutorials on it and was told that overflow x: hidden was crucial to this trigger. However, my horizontal scroll doesn't seem to be working. On vscode, it works somewhat without overflowx but I cant get it to work in codepen. The other problem is that when it does work, it doesn't scroll all the way to the end and the project 3 ends up in the middle of the screen as opposed to the top left. Any help would be greatly appreciated. Thanks

See the Pen NWOaZLB by Steve-Manny-Nanny (@Steve-Manny-Nanny) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @clau2 and welcome to the GreenSock forums!

 

There are a couple of issues in your setup. In your wrapper you don't need the overflow in the Y axis to work so is better to just set the overall overflow to hidden. Then is the start and end points you're giving to ScrollTrigger. By using a relative value you're setting your end point to be relative to the starting point, since that value never reaches the actual point because there is not enough scrolling available you never see the end of the animation. If you add an extra space at the end it works. Also is not a really good idea to give the body tag a display flex property it can lead to issues like this.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

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