Tanuki

Kind of a late response, but this is definitely a bootstrap problem, even v5. I think the issue is that bootstrap uses 3 separate classes for this function (.dropdown, .dropdown-menu and .dropdown-item), so animations that involve the height of the .dropdown class may not execute in sync with the display of .dropdown-items (animated or not). So the problem described above is that, if the .dropdown class height is animated, the .dropdown-item (menu items) appear "outside the box" until the .dropdown animation is complete. Even the default bootstrap animations don't seem to work with .dropdown. The only way I was able to get this to work (pre-gsap) was to fade the opacity on .dropdown, rather than animating the height, which minimizes the appearance that the .dropdown-items (menu items) are outside the box. I'm just starting to look at replacing my animate.css fades with gsap, so I may have some questions myself.

Thx! BTW, this forum app is really great!

Cassie, Thx - yep, that's pretty much what I'm getting. Somehow, I was under the impression you were able to export (or save as) just the path data string. So, I think at this point I'll just write a routine to search for the "d" string and pop that into the setAttribute (''d", ...) method. But again, because I would be dealing with 8,100 individual characters and 200k words (that resolve to 1 to 4 "d" strings in an svg file), it would be preferable to have a database of just the path data in each record. But I'll worry about that later. Thx for all your help! Let's close this thread out - I think we can all agree we've pretty much covered all the angles on path data. Cheers

Cassie asked the question - I'd prefer if she answered my response.

I think we're in a bit of a loop here. If there is a way to save or export an Ai file such that it only includes path data, could you please tell what that process is. I'm really not clear from your response what you are recommending...

But that's the whole point - I only want the path data! If I use "images - link" in my export settings, I can eliminate the png content from my svg file, but I still don't get just a path data string. But just to put this issue to bed, can you tell me what your Ai export settings are and...do you get a simple path data string? "persistent" in this context means the path data (and only the path data) is stored in a db and doesn't need further modification in order to use xxx.setAttribute('d', ...).

@Cassie @PointC fyi re "parsing" path data... npm plugin - this is kind of what I was looking for to "extract/parse" path data from an svg file - it works, but you'd need to write an app to create persistent "path data only" files: https://www.npmjs.com/package/extract-svg-path var parse = require('parse-svg-path') var extract = require('extract-svg-path') var path = extract(__dirname + '/infinity.svg') var svg = parse(path) console.log(svg) //=> [ [ 'M', 25, 15 ], ... ] gimp - here's an alternative to do the same thing to create persistent path data files using gimp. Gimp is a little painful to use, but for this kind of function, it works... https://www.useragentman.com/blog/2013/04/26/how-to-create-svg-paths-easily-using-the-gimp/ Not sure why Adobe can't provide this functionality OOTB...

Cassie, Thx again for the quick reply! path.setAttribute looks like the way to go. I've got that working with an array in JS. Now I'm just working on integrating with a db. Thx for the tip!

Carrie, Many thanks! Just to make sure I understand the constraints for using SVGMorph, could you kindly confirm the following: - for complex shapes (i.e. other than rect, circle, etc.), SVGMorph requires path data. - SVGMorph can only reference path data implemented as inline html code. - SVGMorph cannot directly reference path data in a file, regardless of the tag (i.e. img, svg, etc.). - if I have to dynamically display SVG's (based on user selection or other criteria), then I have to somehow populate the <path> tag with each SVG path data using some kind of parsing function. Thx again!

Cassie - I have 3 use cases. The first is a more "traditional" animation in a page header, where there's really only a few characters and it doesn't matter if they're inline or not. The second is a dynamic animation of any Chinese character (there are 8,105 at last count) based on the context (either user input, highlighted text or whatever). Although most people assume that each character is just a composite of random strokes, in fact, each character is composed of one or more simpler characters (and that's recursive, so those smaller simpler characters are, in turn, further decomposed). So the goal is to store both a character and its components and animate the composition. The third is animating the stroke order of any selected character, which is considered important in understanding each character. Character decomposition and stroke order would be mutually exclusive animations. And although the persistent store needs to be a relational db, I think JSON would be a workable (if not mandatory) intermediate format. Hope that clarifies the reason(s) for avoiding inline paths! Thx!

I think the problem is that CJK (Chinese, Japanese and Korean) are all 2 bytes per char. Also, I'm using the Kaiti font. But either way, I think the parser function that Blake provided may be a way to strip out the path - TBH, it doesn't matter to me if Ai exports the Encyclopedia Britannica with each character, as long as I can parse the path...:>) working on it today...

So if I swap out img with svg, then the statement is true? As in your codepen: <svg id="svg4" class="svg c-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"> <use id="logo" class="c-logo__roadmap" href="#roadmap-small-logo"></use></svg> I can pop an svg file in this element and, using your parser, I can use SVGMorph? The question I've trying to address is can I avoid having to use hard-coded path info in my html...

I think we may have a nomenclature issue. I'm brand new to gsap, so bear with me. - I don't think I mentioned "images" - so I fully understand that SVG's are the only types that can be used in the SVG Morph plugin. - Similarly, groups are probably not applicable here - multiple characters would be created as a single SVG. - I did mention "shapes", such as <rect> elements - not sure what to call those in the gsap world, but I've already confirmed that <rect> etc can be converted using convertToPath, so that's not an issue either. - Chinese characters, which are created in Ai as simple text with Chinese fonts, generate very complex exports - nothing nearly as straightforward as the example in the "better Ai exports" article. Regardless of the export method (and the one in the article is nearly identical to what I've been using) Ai exports of Chinese text generate files that are 280+kb. The path info is at the very end, so I've been manually copying the path data into my html. - I do see a parsing function in your codepen and that's probably the approach I should use. Not sure if it will choke on the huge SVG's I'm getting out of Ai, but I'll give it a shot. Thx for all your help.

Jack, Cassie, Thx both for the quick replies! Re x,y attribs in path: Re x,y attributes - gsap.set works great! It seems that MorphSVGPlugin.convertToPath(srcRect) automatically picks up x,y attributes in a <rect> or other shape, so I can either set x, y, width, height in the <rect> tag or x, y, scaleX, scaleY with gsap.set. Re nested SVG's: as I mentioned in my initial post, I tried nested SVG's, but I wasn't getting any further control inside the child SVG. so I'll just go ahead and delete the child SVG, since gsap.set gives me the granularity of control that I need. Thx again!

Cassie, thx for the super quick reply. Yes, I previously watched Carl's video and I guess I keyed off his comment that you could use SVG's created in Illustrator (which is what I am doing). Here's my endgame: - dynamically populate a page element with SVG's (in this case, Chinese characters). - morph them to some kind of shape with English text. If I understand you correctly, what I would need to do would be: - create the SVG's in Illustrator. - convert each SVG to path data. - populate the page element(s) with path data. - skip the convertToPath - use the SVGMorph against path data. So, I already have that working in my prototype. The reason I've been trying to use convertToPath is that I haven't found a way to export path data directly from Ai and have had to manually convert each SVG. Also, it seems that images rendered from path are not as crisp as the original SVG's, but I think that's unavoidable. If you know of a good conversion site, that would be greatly appreciated. Thx again!