noviedo Posted July 19, 2021 Share Posted July 19, 2021 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! 🙂 🙏 scrollvideo.mov See the Pen abWwGgJ by nazarenooviedo (@nazarenooviedo) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted July 19, 2021 Share Posted July 19, 2021 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 More sharing options...
Solution Carl Posted July 19, 2021 Solution Share Posted July 19, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
noviedo Posted July 19, 2021 Author Share Posted July 19, 2021 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 2 Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2021 Share Posted July 19, 2021 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. 4 Link to comment Share on other sites More sharing options...
Carl Posted July 19, 2021 Share Posted July 19, 2021 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. 2 Link to comment Share on other sites More sharing options...
noviedo Posted July 19, 2021 Author Share Posted July 19, 2021 Hi @GreenSock, thanks so much for the insight, I really appreciated it, I would have never find the CSS weird behavior. 🙏😀 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2021 Share Posted July 19, 2021 15 minutes ago, noviedo said: Hi @GreenSock, thanks 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 More sharing options...
uavide Posted September 13, 2022 Share Posted September 13, 2022 Hi to every one..i like this kind of effect, how i can make if i would like that when i open the page i see the first name (matias), like now i don't see any name. Thanks Davide Link to comment Share on other sites More sharing options...
GreenSock Posted September 13, 2022 Share Posted September 13, 2022 Just remove the first one from the initial .from() tween, and adjust the position parameter in the other: See the Pen NWMRZxe by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
uavide Posted September 18, 2022 Share Posted September 18, 2022 Really cool thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now