Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
noviedo

[ScrollTrigger] Vertical Slider

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

  • Solution

hmm, ok. well i removed your height:100% on the body,html rule and extended your ScrollTrigger end value to 6000

 

positioning is off but it works very well and doesn't lock up

 

See the Pen wvdeNwO?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I think you may need to experiment with the css some more.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hey @Carl!, thanks so much for your help, I think that with these CSS changes I can get the same initial result. Really I needed other eyes to find another way, thanks again for your help, and btw, your courses are great man!

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

  • Like 2
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 3
Link to comment
Share on other sites

Hi @noviedo glad you got it working. looks great. So glad to hear my courses are helping.

@GreenSock thanks for the insight. would have never guessed what was causing all that weird stuff.

  • Like 2
Link to comment
Share on other sites

Hi @GreenSockthanks so much for the insight, I really appreciated it, I would have never find the CSS weird behavior. 🙏😀

  • Like 1
Link to comment
Share on other sites

15 minutes ago, noviedo said:

Hi @GreenSockthanks so much for the insight, I really appreciated it, I would have never find the CSS weird behavior. 🙏😀

Happy to help! 🙌

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