paketaaa Posted August 17, 2022 Share Posted August 17, 2022 Hello, my animation is not ending correctly when i'm scrolling fast. I was looking threads and many people said that it's logic issue but i still dont get a point how to solve it. When im scrolling fast my "transformY" on ".monitoring-wrapper" is not ending because new starts. so maybe i can make a queue or something like that? See the Pen gOeZbJN by paketaaa (@paketaaa) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 Sounds like a logic issue, yep. Maybe this pen will help? If not and you have 'conflicts' not just visual overlaps - I'd look at restructuring your code. See the Pen ZEyXPGj by GreenSock (@GreenSock) on CodePen Also check out the new release. You can get rid of those matchMedia checks. 🥳 Link to comment Share on other sites More sharing options...
paketaaa Posted August 17, 2022 Author Share Posted August 17, 2022 33 minutes ago, Cassie said: Sounds like a logic issue, yep. Maybe this pen will help? If not and you have 'conflicts' not just visual overlaps - I'd look at restructuring your code. Also check out the new release. You can get rid of those matchMedia checks. 🥳 Should i just add preventOverlaps and fastScrollEnd on each scrolltrigger? If it is then it doesnt work for me. I'll try to explain. When I'm scrolling, i need to pin my right side panel and set active element on top of a page like scrolling. But when i'm scrolling back my "transformY" on ".monitoring-wrapper" is not equal 0 for some reason. Sorry for my bad English and i hope you'll help me. Thanks! Link to comment Share on other sites More sharing options...
paketaaa Posted August 17, 2022 Author Share Posted August 17, 2022 Also thanks for new release post. I appreciate it Link to comment Share on other sites More sharing options...
paketaaa Posted August 17, 2022 Author Share Posted August 17, 2022 I think i need to set progress(1) if new animation starts 🤔 Link to comment Share on other sites More sharing options...
Cassie Posted August 17, 2022 Share Posted August 17, 2022 That's basically what preventOverlaps:true does! I'm afraid I'm finding it a little hard to help more than abstract concepts and examples, visually I can't really parse what your demo is mean to look like. Link to comment Share on other sites More sharing options...
paketaaa Posted August 17, 2022 Author Share Posted August 17, 2022 @Cassie An example of how my demo should look like is in this topic (dropbox video) Link to comment Share on other sites More sharing options...
paketaaa Posted August 18, 2022 Author Share Posted August 18, 2022 @Cassie Still can't fix this issue, i added prevent overlaps but nothing changing, is there any other ways to force end animation or I just doing wrong? (updated codepen) Link to comment Share on other sites More sharing options...
paketaaa Posted August 18, 2022 Author Share Posted August 18, 2022 I've tried to refactor my code and make it with preventOverlaps and still wrong. Maybe im wrong with math? See the Pen wvmRjYL by paketaaa (@paketaaa) on CodePen after scrolling whole section and then back to top my translate y not equal zero. I still dont understand why Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 I'm sorry mate I still really don't understand what you're trying to do, I'm a little sick at the moment so my brain isn't working on top form. But your demo has image tags that aren't loading, there's loads of stuff going on. If it's just the monitoring-wrapper you're struggling with can you cut this demo just down to some coloured boxes and the specific tweens you're not managing to get right. Take out everything that isn't completely necessary, if the issue is y axis stuff, we don't need any tweens doing fades or changing flex values. Just pop some coloured boxes in, simplify simplify simplify. Link to comment Share on other sites More sharing options...
paketaaa Posted August 21, 2022 Author Share Posted August 21, 2022 @Cassie i've tryed to minify code and leaved only one tween which has a problem. See the Pen wvmRjYL by paketaaa (@paketaaa) on CodePen I'll try to explain one more time. When you scroll, you make left element active and translateY parent element to child element's height, but in my case when you scroll to the bottom and then back to top, parent's translateY not equal zero. I hope i explained well. I also want to tag @GreenSock because this man helped me last time with this case but with my changes it's not working like i wanted to. Thanks in advance for your reply. Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2022 Share Posted August 22, 2022 Hi @paketaaa. You'll have a much better chance of getting a good answer if you greatly simplify your demo. You've still got 100+ lines of JS. Do you really need that just to show this issue? It's kinda hard to see what you're trying to do in every part. Keep in mind that it's a very bad idea to animate the parent element of a trigger on the y-axis because that would affect all the start/end positions of anything inside. I'd definitely avoid that. 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