knalle

Oh forgot to make a pen 😞 But Mikkel’s pen is showing the problem - e.g. “hyper-professionellen” is not understanding the soft hyphen.

Is it possible to have texts split by chars and have ­ (soft hyphen) work? So bigger words are using grammatically correct hyphenation, when viewed on the phone

The locomotive scroll demos above are not performing well on iOS. The pinned/fixed parts are shaking badly when scrolling.

@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.