Jump to content
Search Community

DrawSVG and ScrollTrigger fire to many events with magic mouse and touch devices

Chipsa test
Moderator Tag

Recommended Posts

I have big SVG (like 200vw 200vh) and fake-horizontal scroll section, at first time i realize svg drawing with simple change stroke-dasharray onUpdate, but I have some blinks and other artifacts, but good performance, now I add DrawSVG for line and magic mouse and touch devices fires too many events, drawing happens too often and fps drops to 12, can I throttle this or something?

code is too simple, timeline and fromTo with DrawSVG 0%-100%, for example of fps drop - https://frontend.chipsa.ru/mediadesk/public/html/

if need I can add simple demo, but I'm sure problem with firing too many events.

 

And how I can update all ScrollTriggers to actual scroll? I have some callback animations, and some relative triggers, if page reload and position not (0, 0) my animations on scroll doesn't play and user didn't see some of decoration, it's 100% logical, but how I can trigger this? Also if you click on anchor link(temporary removed) and animations have callback animations that not scrubed and have duration but haven't enough time some things look broken, maybe you have some recipes to dodge this?  

Link to comment
Share on other sites

I think that this has more to do with the rendering performance of animating stroke-dasharray than it does with ScrollTrigger or GSAP, which are tuned to use rAF, I believe. It could also be something with you setup too... A minimal CodePen could help. Your Demo actually seems to run pretty smooth on my machine: I only got it to dip to 43FPS, but that was where you were animating a full-screen mask (also need repainting and can't be hardware accelerated).

 

For animating things like stroke-dasharray or full-screen masks, you may have to start looking at WebGL or other approaches to get the same effect to get max FPS performance.

  • Like 2
Link to comment
Share on other sites

19 minutes ago, elegantseagulls said:

I think that this has more to do with the rendering performance of animating stroke-dasharray than it does with ScrollTrigger or GSAP, which are tuned to use rAF, I believe. It could also be something with you setup too... A minimal CodePen could help. Your Demo actually seems to run pretty smooth on my machine: I only got it to dip to 43FPS, but that was where you were animating a full-screen mask (also need repainting and can't be hardware accelerated).

 

For animating things like stroke-dasharray or full-screen masks, you may have to start looking at WebGL or other approaches to get the same effect to get max FPS performance.

For get lower FPS you need magic mouse or touch device, I already did this with stroke-dasharray(not DrawSVG) and FPS was much higher.

Example of stroke-dasharray animation 

See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen

Example with DrawSVG - 

See the Pen LYWqbRJ by baranovroman (@baranovroman) on CodePen

Link to comment
Share on other sites

14 minutes ago, Chipsa said:

need magic mouse

I am using a magic mouse. You've got a lot going on in the codepens, and also you have a horizontal scroll happening too. I'll see if I can do a deeper dive a bit later, but I'm still not seeing much difference between the two. Is your issue in all browsers or any specifically?

Link to comment
Share on other sites

I don't see any difference, and there shouldn't be any difference as they are animating the same property.

 

6 hours ago, Chipsa said:

magic mouse and touch devices fires too many events, drawing happens too often and fps drops to 12, can I throttle this or something?

 

It is throttled. All events are queued so it only updates on every animation frame. If you have a high refresh monitor, that will happen more often.

 

  • Like 2
Link to comment
Share on other sites

I don't see any difference either, and I'm using a magic mouse. It's normal for the drawSVG version to be very slightly less performant than a basic strokeDashoffset tween because DrawSVG does a bunch of things to protect you from browser bugs. And you're not using vector-effect="non-scaling-stroke" on any SVG that's doing the draw effect, right? That can hurt performance as well. 

  • Like 2
Link to comment
Share on other sites

4 hours ago, GreenSock said:

I don't see any difference either, and I'm using a magic mouse. It's normal for the drawSVG version to be very slightly less performant than a basic strokeDashoffset tween because DrawSVG does a bunch of things to protect you from browser bugs. And you're not using vector-effect="non-scaling-stroke" on any SVG that's doing the draw effect, right? That can hurt performance as well. 

Okay, I add non-scaling stroke and win some FPS, for now code is bad, I can optimize it and win more FPS, the question was about throttle some calculation, but yes, DrawSVG really save me from some bugs and it's logical to lose some fps for it, thank you! 

  • Like 2
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.
×
×
  • Create New...