Jump to content
Search Community

Good Looking Software

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by Good Looking Software

    SVG loads scaled crispy & lovely, gets blurry on pause

    in GSAP

    Posted

    I have an animation with lots of SVGs. They are rendered beautifully, scaled up and everything, on initial load. Once you move forward or backwards in the animation (by clicking one of the big blue arrows or a light brown mangrove root), the roots become blurry, especially the ones closest to you, even after the animation has completed.

     

    The animation is mostly one timeline which loops. It begins paused. The motion is created by advancing in time in the timeline by passing a value to pause.

     

    I looked around online and saw some suggestions like setting transform3d to auto, but that didn't work for me. I'm hoping this is a familiar problem to you veteran animators.

     

    I've attached a before (left) and after (right) picture but looking at the animation is probably the easiest way to see the behavior:

     

    http://catalyst.goodlookingsoftware.com/a/

     

    Thanks again!

    Aaron

    post-39464-0-01495900-1446772903_thumb.png

    Tools and tips on debugging slow performing animation

    in GSAP

    Posted

    Thanks, OSUBlake. I'm going to give fabric a shot this week and report back with my findings. There's a fabric setting--something like perPixelSelect--that tells fabric to only use the opaque part of an image for mouse events. That's what I was getting at with the transparency stuff. I've got 30 images stacked that are mostly transparent except for the image or a tree root that passes through it.  So, the root visible to the user might be 10 images down the stack. 

    Tools and tips on debugging slow performing animation

    in GSAP

    Posted

    I'm not seeing a critical piece: a way to send mouse events through the transparent portions of stacked elements down to the first visible opaque element.  Do you know if fabricjs or another library can handle that? Would this be instead of GreenSock?

     

    I'm trying to figure out if my best chance at success is to shrink and simplify what I have or port it to something like fabric.

     

    Thanks again,

    Aaron

    Tools and tips on debugging slow performing animation

    in GSAP

    Posted

    Thanks for all of this!

     

    For #4, any tips? I use the z-index a lot. For example, should I do extra math to ensure the z-indices are only incremented at intervals? Should I try to limit the frequency any z-index is changed or how many z-indices change when any z-index is changed?

     

    For #6, do you mean that I should wrap the animation elements in a canvas tag or is there more to it than that?

     

    For #7, do you do this in the css? pointer-events: none; I do that for elements that intercept pointer events, but should I be doing that on any element I possibly can?

     

    Thanks again. Very helpful!

     

    Aaron

    Tools and tips on debugging slow performing animation

    in GSAP

    Posted

    My animation is slow but my various browser debugging tools don't show where the delay is happening.

     

    I will post again with specifics and a Codepen if this fails, but could someone take a look at my animation and tell me how they would approach understanding its performance? What tools do you use to see how long things are taking, how memory is being used, and where the bottlenecks are?

     

    http://catalyst.goodlookingsoftware.com/a/

     

    Many thanks,

    Aaron

     

     

×
×
  • Create New...