knalle

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.

Thank you OSUblake, I resolved to individual x,y,z properties in stead of a combined transform.