Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

SUPERKODERS

BusinessGreen
  • Posts

    7
  • Joined

  • Last visited

Posts posted by SUPERKODERS

  1. @GreenSock thanks for replay. I understand how inertia works but I expected that it tracks only if draggable is actived = dragStart event is fired. Is it safe manipulate with InertiaPlugin when Draggable handles it internally? If yes i will do it in callbacks.

     

  2. Hi all,

    I am trying to solve issue with Draggable. I run performance test on my site and I am able to see rendering tasks on main-thread, but page should be in idle state. I know GSAP has something like autoSleep but it seems that this not work for Draggable. Browser is doing uneccessary work. On weaker computers fan is running and on mobile devices the batery is warming and consuming.

    Is there any way how to impove it? I tryied .disable method but it not help.
    Thanks for help.

    1356810435_Produktyvparku-CSBeton2021-10-1420-47-34.thumb.png.406b6693c768f35f6d7743322d473f6c.png

    Produkty v parku - CS Beton 2021-10-14 20-48-23.png

  3. Thanks Blake for great tip. You have right. I investigated only performace but no data.

    I will tell it to my colleague. It is a pity I did workshop to my team about this some time before.

    • Like 1
  4. Yes I understand.

    In animation it is using bezier with data from pathDataToBezier,

    BUT maybe problem is this

     

    TweenLite.set($dots, {
      xPercent:-10,
      yPercent:-10,
      transformOrigin:'50% 50%',
    });
     
    before animation start. We will try it without this and I will let you know.
    Thanks for quick respond!
     
  5. Hi,

     

    I find out very bad performance issue when I am animating more SVG elements together.

    I have some knowledge how browser rendering performance works and then I discovered thru DEV timeline that it is layout trashing.

    You can try test it on live site here https://storyous.com/cz/ (animation in top banner)

     

    Here is a timeline

    image.thumb.png.4b1e3f37f9566bbefa1bd84c72f30824.png

    bottom purple colls are like a usually layout trashing looks

     

    I investigated more.

    First I was very surprised that every svg transform animation going thru attribute. I saw some time before that svg animation went with style transform also like normal html node. After few minutes I find out why. https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/CSSPlugin.js#L1200

    It is some workaround. Do somebody know why? From comment it is not clear.

     

    Layout trashing is caused by

    reading BBOX

    https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L4293

    and after setting attribute

    https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L4307

    in loop with X elements

     

    In code should by some workaround like FastDom https://github.com/wilsonpage/fastdom

    Can somebody look on this issue? Can I help with something?

     

    Thanks,

    Michal (michal.matuska@superkoders.com)

     

×