Jump to content
Search Community

[ScrollTrigger] Vertical Slider

noviedo test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hey guys! I reused an animation based on snorkltv to have a rotator attached with the ScrollTrigger, but I'm having some issues with the scroll. I can't find the bug, but my issue is that scroll is blocking (I can't reproduce the exact time or behavior), and the animation obviously stops working.

I leave here a video and the Codepen to show them, as usual, thanks in advance for your help! 🙂 🙏

 

 

See the Pen abWwGgJ by nazarenooviedo (@nazarenooviedo) on CodePen

Link to comment
Share on other sites

Great to see you using the course material and putting your own twist on it!

I'm totally stumped here.

Your animation works great without ScrollTrigger, but when it gets added back in, things eventually become unresponsive.

I experimented with a variety of settings and it seems things go wrong with pin and pinSpacing activated. 

Being that it works sometimes and then locks up with no errors has me as confused as you. 

 

Hopefully someone else can take a deeper look.

 

I'm sure there will be a solution.

Link to comment
Share on other sites

Yeah, it's a CSS issue. You've got the height of the ul set to 100% but when you apply a perspective to that, the browser apparently creates a different context and suddenly the height is actually 0. This is totally unrelated to GSAP/ScrollTrigger - try for yourself without any GSAP/ScrollTrigger code at all. Weird, I know. 

 

Set the height to 100vh (same for your <body>). 

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

 

Another solution is to set pointer-events: none on that <ul> because when that element became position: fixed, it was basically getting put on the top of the stacking context and absorbing all pointer events including wheel events. But if you do pointer-events: none, you'll obviously lose any interactivity with that element and its descendants (links won't be clickable, for example). 

 

I hope that clears things up. 

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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