billybrewster

That's really helpful Zach, thanks so much. You also cleared the fog for me on why an animation using yPercent wasn't behaving as I expected it to (because initial value had been set using CSS). So, 2 birds 1 stone :). Cheers!

Hey all, So pretty simple question. I'm observing some elements and fading/sliding them in as that part of the page is intersected. Is it more performant/better practice on page load to: a) set elements in CSS with a transform value e.g transform:translateY(100px) and then animate to y:0 with GSAP or b) set elements with gsap.set(element, {y:100}) and then animate to y:0 From what I understand any change to the DOM results in a repaint and it seems to me that setting with gsap would cause such a change whereas if the initial values of the elements are already set as in (a) then that won't happen. I could be misunderstanding the sequence though so looking for advice from the experts :). Many thanks!

Hey Zach. Thanks for replying :). Ah ok, I will take a look at the MotionPathPlugin. I'm creating some animations for showing chart data and wanted to curve the charts rather than have fixed lines. If I get stuck after checking out the MPP I'll be sure to ask for help :). As for the docs. Here is what I mean, you have 2 functions in MorphSVG which convert a raw path from an array to a string (MorphSVGPlugin.rawPathToString) and the reverse, a function that converts a string to an array (MorphSVGPlugin.stringToRawPath). However, in the docs details section it explains what the function does e.g convert one way or the other but the images shown are in the same order which give the impression that the function converts from image a to image b. This is compunded by the text preceding the second image which says "So the resulting RawPath would be:". But there would be no resulting raw path from using the rawPathToString function , it would result in a string. It just threw me for a few seconds so i thought I'd mention it. It's probably a combination of me being dumb and tired :p. Thanks!

Hi all. Hope you can help. I haven't created a pen because this can be reproduced by just forking the morph hippo/star demo and adding the code from the example docs e.g: var bezier = MorphSVGPlugin.pathDataToBezier("M37,17v15H14V17H37z M50,0H0v50h50V0z", {align:"relative"}); Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function Locally I'm playing around with MorphSVG and all the other functions work (convert, rawpathto, stringto etc) but the bezier one errors out. I'm using gsap core, custom ease and morphsvg plugins. Do I need to install another to get the above working please? Also your examples page for stringToRawPath has the images the wrong way round in the details section - https://greensock.com/docs/v2/Plugins/MorphSVGPlugin/static.stringToRawPath(). I think it's meant to show the rawPath example first and the resulting conversion in string form second with the preceding text saying "So the resulting string would be:". Confused me for a few moments :p. Thank you!