knalle

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

Thank you PointC - that makes sense!

Mikkel, the closing "look" is right, but my CodePen is simplified and the case of simply reversing isn't going to work - I need to have svg working in in 0.9.1 again. Perhaps there are new MorphSVG setting I need to fill in?

I upgraded to latest MorphSVG (v. 0.9.1) - but now the SVG path closing animation is not working (the background should "scale" back in). What could be the problem? It works in 0.8.8.

Ah yes, thatnk you. You are right I missed that! It happened with SVGOMG that optimized it "too much". A notice on this in the docs is better if the alternative is additional checks in convertToPath(), that has a negative impact on speed

I just noticed that a <rect> with the rx attribute is not converted to a <path> with the same appearance. <rect x="90" y="115" width="228" height="206" rx="23"/> Well, it depends on how you look at it. I guess it is intended behavior from GSAP but not what I expected. Perhaps it should be mentioned in the docs - also if other "basic" SVG shapes attributes are ignored.

That works Thanks! The waveSVG is a solution that works just as fine as Blake's demo. Is there any benefits in speed / CPU load compared to the other (blob) solution?

I wan't to wiggle an existing path - in the style og the blobs here: https://codepen.io/osublake/pen/vdzjyg , but this one creates blobs instead of using an existing. In this previous post there are some discussion on the topic: I have tried Jack's waveSVG that accepts existing path data. But I notice the start and end points aren't aligning in the wave motion. I will only wiggle a blob consisting of around 20 points. The various blobs are used as backgrounds for line icons. Thanks in advance

aaaahh stupid and a bit weird error I use the lovely ScrollMagic and while developing I use the addIndicators plugin... and every now and then I hide the indicator through CSS with: script ~ div {display: none;} Since the indicators (divs that has no IDs og classes) were added after the last <script> tag - so I though I had come up with a smart way of targetting those divs I had not transferred that CSS line to the Codepen, so it worked of course So it works now, but I don't understand how it causes the error in Firefox (?).

it's the area beneath the image that is supposed to be draggable (and it is working in the pen somehow)... but I cannot work out why the link I posted isn't working in FF

codepen - the snapping isn't working in the pen ... but it appears to working in firefix here.

Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error: TypeError: Argument 1 of SVGPoint.matrixTransform is not an object. And then the Draggable is not working at all Check it here: http://gsap.mouret.dk/ Any suggestions?

.... seems the solution was to add the two functions to the TimelineLite instead og the two TweenLites: flapTl = new TimelineLite({onComplete:reverseTween, onReverseComplete:restartTween});

I need to use TweenLite due to space limitations in the project (yay!) I suspect the TweenLite isn't working because of the Timeline... not sute really Any suggestions on how to yoyo and repeat with TweenLite? //working TweenMax version function flapWingsMax() { flapTl = new TimelineLite(); var wl = TweenMax.to("#wing_left", 0.1, { scaleY: 0.5, repeat: -1, skewX: 20, transformOrigin:"86px 104px", yoyo: true, onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenMax.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, repeat: -1, transformOrigin:"9px 87px", yoyo: true, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); } // TweenLite - NOT working function flapWingsLite() { flapTl = new TimelineLite(); var wl = TweenLite.to("#wing_left", 0.1, { scaleY: 0.5, skewX: 20, transformOrigin:"86px 104px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) var wr = TweenLite.to("#wing_right", 0.1, { scaleY: 0.5, skewX: -20, transformOrigin:"9px 87px", onComplete:reverseTween, onReverseComplete:restartTween, ease: Sine.easeInOut }) flapTl.add(wl, 0); flapTl.add(wr, 0); function reverseTween() { this.reverse(); } function restartTween() { this.restart(); } }

seeking the same as hemmoleg asked quite a few years ago I'm also changing direction (zoom in/out) and the updateTo does not solve - guess we seek a more physical behavior with deacceleration+acceleration when changing midtween.