Jump to content
GreenSock

paketaaa

Animation Bug when Scrolling fast

Recommended Posts

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

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

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

Also thanks for new release post. I appreciate it

Link to comment
Share on other sites

I think i need to set progress(1) if new animation starts¬†ūü§Ē

Link to comment
Share on other sites

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

@Cassie An example of how my demo should look like is in this topic (dropbox video)

 

Link to comment
Share on other sites

@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

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

 

image.png.cc74b254d3db38f4997f47392feb0961.png

 

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

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

@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

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

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