thejamespower

Managed to solve it with:

align: 'relative'

in the MorphSVGPlugin.pathDataToBezier options. Should have checked the doc's more thoroughly!

Hi everyone,

I'm trying to animate some objects (arrow heads) along the path of the arrow itself. CodePen attached. I'm attempting to use the BezierPlugin to achieve this, but transforms are being applied to the position of the arrow heads in a strange way. I'm sure there is a straightforward solution to this, but I can't seem to figure it out!

Many thanks for any help provided, as always!

See the Pen eRzMOW by thejamespower (@thejamespower) on CodePen

Thanks all! Yes, Safari seems to go its own way with most things, spec' or no spec'. 

From Jonathan's brilliant reply,  hardcoding the transformation on the <g> parent or using GSAP to set it with the AttrPlugin appears to work in both Safari's on MacOS and iOS.

Thanks again for the help and as always, brilliant support 

Hey guys,

I'm trying to get a simple DrawSVG animation working. DrawSVG works amazing as per.. however I'd like the animation to start from 12 o'clock rather than the standard 3 o'clock start point for SVG circles. For some reason neither iOS or desktop Safari honour the rotation. Any ideas? Reduced CodePen is attached.

See the Pen VPJqPW by thejamespower (@thejamespower) on CodePen

This is true

If anyone's interested I've filed a bug report with the Chrome team: https://bugs.chromium.org/p/chromium/issues/detail?id=625971

I edited the codepen to also include the equivalent pure CSS animation and the same clipping occurs. I've also discovered this only occurs in Chrome. Any ideas on how to overcome this?

Hiya,

Working on something snazzy with GSAP and CSS Filters, specifically blur. I've noticed that when animating with GSAP, clipping occurs on any object with a CSS filter. Is this expected behaviour? 

See the Pen akybXr by thejamespower (@thejamespower) on CodePen

Thanks for the speedy reply, on play with a stripped down example in Codepen, I have been unable to replicate the problem. Probably something in our implementation internally. Will keep you updated.

Apologies if this has been covered before, could't locate it in the forums or on StackOverflow etc.

Currently working on a nice little horizontal slider that controls animations for an e-learning project. Unfortunately we work for big pharma who still mandate IE8 support (I know  ).

Anyway, it seems I've come across a little bug where on using the onThrowComplete method to calculate the end position via 

this.endX / this.maxX * markers.length

fails in IE8. On closer inspection is appear this.maxX returns NaN in IE8. 

Anyone have any ideas as to what's happening?

Cheers