search

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
https://zzz.dog
10.38k stars 394 forks source link

Can't apply animated some properties (stroke, rect width, circle diameter) with Greensock #27

Closed chrisgannon closed 5 years ago

chrisgannon commented 5 years ago

The values are definitely animating in GSAP but some are not updating the shape's property.

Diameter does not work https://codepen.io/chrisgannon/pen/db98d513d1939929876ef03cccf3f8b1

Stroke does work https://codepen.io/chrisgannon/pen/c5d9f322bb6c42d4c6d89f45a34e560e

desandro commented 5 years ago

Hi Chris. Thanks for reporting this one.

Changes to an item's shape or path require that updatePath() be triggered. This includes properties like width, diameter, or vectors within path.

Most other properties like translate, rotate, scale, stroke, color are all directly changeable.

I realize this is a weird gotcha. The reason is that Zdog has to re-calculate vectors and stuff when the shape changes, but all the other values are directly used. I don't think I called this out in the docs right, so if you've got an idea on that I'm all ears.

chrisgannon commented 5 years ago

Excellent! I have updated the pen to show the solution. Having read through the docs again I now see the updatePath() function.

Maybe you could add a 'Gotcha' section where possible confusions like this are described. I appreciate they are in the docs already so maybe it's not necessary. I (wrongly) assumed updateRenderGraph() would update everything - maybe others will too.

Anyway thanks for the solution. I'm glad it's working - I'm having so much fun!