knalle

@OSUblake I have made a isometric (not dimetric) pen based on your pen. I hope the math is right https://codepen.io/knalle/pen/WNNQYew

@GreenSock Btw, Is the fix available for download?

@GreenSock that’s why i love GSAP forum. This is the best library and community - by far! Thank you all for all the help 🥰😀

It seems my post was trimmed somehow:) but the problem is that the “anti-lag trick” (progress) is not working with the menu (codepen above), so the closing animation makes a weird jump. How come?

I notice the first time my menu timeline animation is lagging (well, not the simple codepen version here). And if I apply the timeline.progress(1).progress(0) trick (as Jack points out in https://codepen.io/knalle/pen/NWWGRjB (line 30, I have added progress(0).progress(1) )

Great example - why is it squished at 1? also it clips a bit when z is 0. By the way, those coding math videos are excellent. Easy to follow

SSR = Scale, Skew, Rotate (https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058) I just thought it would be easier to wrap my head around the translations of a square that has been transformed than moving the points on an angle. but performance is probably better in your without the transformations in SSR approach (?)

You are right, Zach. I could describe it a bit better 😊 The webGL would outperform this approach I am sure. But I will need this code for display banners primarily. So take up only few kb is a requirement. Perhaps I’ll be animating only 3-5 cubes. So it will probably perform ok.

Thanks! I was thinking about objects too. Is the ticker the right approach if i have 5-10 cubes animating?

I need to be able to tween the size of a cube on all three axis (pseudo). But when the properties overlap (as seen in the last part of the animation) it breaks. Of course But what would be a better an more intuitive way of setting this up? Also, scaling "across" 0 (eg. sizeX(5) to sizeX(-5) ) is not working unless i use onUpdate or something and check for the value. Ideally, I would like the size tweening working as great as regular 3d scale (X, Y, Z) and the isometric pseudo-3d position of the cube be working like x,y,z.

I have all I need for now, thanks I wanted the MorphSVG features but with the ablity to have vertices show up as dots. So the posts from @mikel are excellent for this thread, though not working with MorphSVG.

Here is a codepen where I have removed the parts that are not needed for the anchors: https://codepen.io/knalle/pen/rNBWbRx But it can probably be improved.

Good idea... most of it is related to the lines/tracers. Will try that

That almost works - but I need more control. I was thinking of looping through path and and draw each vertex as a circle?

What would be the best approach to render dots, that follows the vertices of the SVG path? - like a simple version of the points (not tracers) seen in the demo: https://codepen.io/GreenSock/pen/vvjOGq