Creek

Then what's the GSAP lingo for creating a loop within a timeline, as I'm "going for" here? ie Timeline has reached this point, now go back and repeat starting at "label". And guessing that would have a repeat parameter? And, if I'm testing a long animation - then - skip all this other junk and play starting at "label"? I'm guessing Play is just the wrong command? AWESOME!!! I totally didn't catch why that was tossing up errors. It's especially nice to be able to "exit" GSAP calls and do other stuff. I did try to reference it - but javascript relates that it doesn't exist? Here is the CodePen with console log working, but still unable to halt the function? https://codepen.io/tibbeecode/pen/wvqwOmy The following is just my attempt to explain WHY my animation is structured as it is and why I wish to kill off functions. If there is a way to KILL infinitely repeating functions, then please ignore? -------------------------- I understand I'm not supposed to ask "logic" questions - but hopefully it's okay that I relate MY logic, which is working fine - with the obviously MAJOR exception of the apparently non-killable functions with endless repeats? I'm animating a character with various expressions. Those are the expressions being added throughout the master timeline - like the color changes here in the aniColor function. While those expressions are continuing, there are "background" functions responsible for animating repeated body movements. It's a fish, floating in the water with his fins and whatnot moving about. Collectively those are all various versions of boxAni. However it is I managed to do it, I really like the way everything is working. I'm now just "tweaking" - dealing with what I view as weird "issues"? I can't loop the sequence of expressions, and I can't eventually END the repeated animations. In other words, I have the animation looking almost exactly as I want it to look. And it took me a VERY LONG TIME to figure out how to get it to work somewhat "seamlessly" together. But, at some point, the fish swims off. And all of that floating around animation, the various boxAnis? They are HIGHLY processor intensive. So - fish off the screen - but GSAP is still animating him and eating up the computer power. That's how I came up with the kill(). It works PERFECTLY on parts that are NOT functions. But the functions will not stop. I obviously don't know how to reference them. If it's a javascript thing - and I am not ALLOWED to reference them as functions? Then obviously I need to NOT ever use endlessly repeating functions ever again They NEVER end. I believe you're very politely telling me "You're doing it wrong." But, other than the stupid functions that won't STOP - however I did it wrong is otherwise working? And I don't know enough to disassemble all of it without horrible fear that I'm going to BREAK EVERYTHING that's currently working? My easiest path forward is to just try and REMOVE the bits where I screwed up and made any of the boxAnis into functions. Because, if they're NOT functions - then I'm allowed to kill them? As you related, they probably don't need to be functions anyway. When I initially created all of it, I obviously didn't know functions were so finicky? And I promise I don't know of a more succinct way of explaining that - without various fears of coming across as even possibly "unappreciative" or "not paying attention" or whatever - truly VERY SORRY that I keep erring on the side of "Well it's long-winded, but I'm doing my best to explain myself as best I know how to explain myself?"

https://codepen.io/tibbeecode/pen/gOxYZpz No clue how to end infinite repeat of function, as noted in code comments. Labels also don't work, as noted in code comments. Included as possibly also related to using functions? And I at least think I now understand why attempting to be "conversational" - when asking for help is a horrible idea? Thanks again for everyone's patience. Also, very much hoping that - in attempting to isolate - the gurus understand that even *I* understand that there are much easier ways of accomplishing the simple animation. Just doing my best to demonstrate what isn't working?

YES!!!!! That WORKS! Now that you've explained, I also actually understand WHY that works - believe it or not. Okay, well I think I do? BUT... why is it that in functions that contain timelines - it then doesn't work? It works perfectly for nestedAni which is a nested timeline - but no go for nestedFunctionAni with the timeline nestedFunctionTL? (I have nested timelines that are set up as functions being called with variables - in case I've miscommunicated?) .add(() => nestedFunctionAni.kill()) No go. And .add(() => nestedFunctionTL.kill()) also doesn't work - maybe because outside that function, its timeline can't be killed? But I thought maybe - .add((nestedFunctionAni) => nestedFunctionTL.kill()) Would properly direct the kill notice? And still nope. I also prefaced the right of the arrow with the this. bit, just in case? And still nada. No javascript errors, but the repeat doesn't end. Knowing HOW if possible to send the same information to functions would be awesome? (Oh and I'm completely wiped out for the day, passing out - so my master timeline is killing off my pestering function for the evening It's been on "repeat" far too long.)

I don't understand what's going wrong well enough to isolate the problem to a demo? .add(() => gsap.to(nestedAni, {kill()}) // Did not work .add(() => gsap.to(nestedAni, kill()) // Javascript error .add(() => gsap.to(nestedAni, {kill}) // Timeline never started nestedAni.kill({"repeat:true"}) // Halted master timeline wo ending nested repeat nestedAni.killAll() // Same - halted master timeline wo ending nested repeat And, as the following is probably the same basic issue - not understanding how to code it correctly? Wrong format? .add(nestedTL(myVar), "+=.5") .play("Ending") // just ignored - bc it doesn't exist yet I guess? .addLabel("startLoop") .add(nestedTL(myVar2), "+=.5") .add(nestedTL(myVar3), "+=.5") .play("startLoop") // plays immediately, all .add before ignored .addLabel("Ending") .add(nestedTL(myVar2), "+=.5") I promised that I have taken at least 3 different intro to javascript courses - following along one with the coding, took me a few days. But none of them seem to explain HOW I apply some of what I read even in the docs here? Basically, either the docs provide a very basic introductory level javascript example - or I have NO IDEA how to apply it? Again, I've tried to learn the basics? Oh, and just tossing it out there - in my defense, I have managed to follow along to the point that I have been able to create a fairly lengthy animation. But... then I run into these snags as I'm "tweaking" and I'm just absolutely lost? But I must be missing something HUGE? Some VERY BASIC premise that I've got wrong or backwards? I'm using functions because I'm applying the same animation with different variables. And that part works. Is there a recommended intermediate javascript course that covers everything I actually need to know to at least follow along? I know I keep saying "thanks for your patience" as though it's an excuse - but I honestly don't know where to go? There's only "basic javascript" and then the 60+ hour courses on javascript? I wish I just knew what it is I didn't know - so I could specifically go and learn just that? Advanced javascript for GSAP? I'd hit up 60 hours for that? Then I could go back and review the bit on calling nested timelines as functions when I got mixed up? But most javascript courses? Ends up being the teacher going on about managing shopping carts for probably 59 of the 60 hours? And now... the advanced lesson on how to automatically create new shopping cart items from the SQL database. Oh... well please take our advanced course on SQL databases - 50% off with your code "NOITNEVERENDS" That bit you actually NEED for GSAP? Well that's special hidden content in our Super Advanced Javascript for Javascripters who Script Jovially but not for Java 'cuz Java is a Different Language Entirely and We Always Repeat That in ALL Javascript Courses Because Otherwise You'd Be Even More Confused Part 3 of 7, in the Bonus Extra Content Additions Addendum only available to Super Elite Lifetime Founder Members from Mars.

I've got nested animations with endlessly repeating loops and all of those nested infinite repeats eventually need to stop. Not on clicking - most stuff I've seen has to do with clicking - just when it reaches a certain point in the master timeline. A very literal "screen goes black" moment - and then the master timeline should continue on again, only with the previous stuff no longer infinitely animating? I even did the black screen bit HOPING it then wouldn't be too complicated? Black screen. Dead. But maybe that's why a kill is the wrong thing - it would kill its own timeline? I have no idea - it just came up in searching for ending infinite repeats?

The timeScale function is SO VERY AWESOME!!! The only hiccup now is that I'd prefer to ease into it? The abrupt change can be a bit too jolting? I tried setting a duration and ease, but either I did it wrong or it's just ignoring it? But no javascript error? .add(() => finAni.timeScale(12, {duration: 1, ease: "circ"}), "+=2") The slight changes aren't that noticeable really - but there's a "furious" bit - with the 12x - and it's just too abrupt? https://codepen.io/tibbeecode/pen/GREVvXa

Just making a note - and it's probably common knowledge not to use GSDevTools on infinite repeats 'cuz it makes no sense to use it 'cuz the timeline is a thousand seconds. Duhr... But once I turned OFF ye olde GSDevTools, everything stopped freaking out? You can see it tripping out here And comment out GSDevTools and happiness returns. Oh, learning (how incredibly ignorant I am) is just SO MUCH FUN!!!! Yeah that's 3 hours of my life I'm never getting back Fred G is just laying into me HARD right now - "Ya BIG DUMMY!!!!!!" https://codepen.io/tibbeecode/pen/dyRBRYv

I'm having to do my best to try to work through and digest all of this. I don't wish to not respond given everyone's been so helpful - but it could take me some time to work through it? I just have to delve through my code. Then I hopefully eventually find where it is I screwed up and have my Fred G Sanford "Ya BIG DUMMY!" moment with myself

THANK YOU!!!!! That is SO AWESOME!!!! (I completely screwed up at first - I had the nested timeline set up as a function.)

var random = gsap.utils.random(-200, 500, 10, true); AWESOME!!!! And very cool to know about the utility methods! Now I know which stuff can be set through variables? But, on the original topic I posted here, I still don't get why it is that - within a master timeline - I can't just tell it to speed up one of it's nested timelines with timeScale? I honestly still don't get WHY that's a javascript question? The reason *I* thought it was GSAP specific was because I'm trying to specify WHEN the speedup and slowdowns happen within the timeline? And if I set the timeScale as a variable WITHIN the nested timeline, and then call it again from the master - I get a "jank" because it's infinitely repeating. The repeat begins anew (which is logical yeah?) whenever I "call" it "afresh" again. So I'm not asking about a button or setting x - I'm asking how to apply timeScale to a nested timeline from the master timeLine. I have faceAni(happy), with faceAni being the nested expression timeline. And bodyAni with no variables, being the nested random body movement timeline. The two are sisters. Anyhow, when I call faceAni(happy) relatively at "+=2" within the master timeline, then I would like to increase the timeScale of the already running bodyAni nested timeline at that same time, then slow it back down to "normal" again when I call the next expression - for instance, faceAni(normal). But there is no "set time" for when any of these things happen. It would even be BETTER if I could set the timeScale of bodyAni from within it's sister timeline faceAni - but I hopefully "get" that I am most definitely then asking a javascript question? Because javascript has the rules about variable scope that likely prevent the sisters from sharing variables. My HOPE is that timeScale can be applied to a nested timeline from the master timeline and the timing of the "call" can be specified with "<" to match. ie faceAni(happy) at "+=2", immediately followed by bodyAni:timeScale(1.2) at "<". Anyhow, thus is my confuzzlement. And again, THANK YOU SO MUCH for pointing out the utility methods!!!!

Thanks! He is most definitely awesome! And sorry, I know I'm communicating everything completely wrong If anyone's even interested, I'll try to explain better why it is I can't explain better? Here's the basic situation I've found myself in - How awesome is GSAP? Pretty awesome. So I'll commit to learning it. I'll use it for my project. Then... DAMN IT! How do I DO that? Hunt hunt hunt... OH! Cool! That's really awesome! Not really sure WHY that works - but... IT WORKS!!! Sweet! And so I'm ever deeper into my project. I wish to continue with my project. BUT I obviously need to quit my project and take 4 semesters of javascript, then find out that I really need to learn C to understand javascript, and binary to really understand C? And THEN, many years later, come back to my project But... screw that, right? FORWARD! This stuff is SO COOL! And that's how I've ended up annoying everyone. For instance - "random(1, 3)" - randomly picks a number between 1 and 3. And, even better, repeatRefresh: True, does exactly what's expected - fresh new randoms. But I think those are special GSAP parameters(?) I can't just declare let randomNum = random(1, 3). It can't exist outside a .to statement? That's where it "lives"? So, in the case of my randomly moving fish, I have a left and a right, and they need to be in sync. So I need the SAME random number for each, only reversed. Given that's a very likely scenario, my guess is that I just haven't yet found the GSAP parameter and method for that And look at me, saying words like parameter and method, as if I know what they mean. But is that a javascript question or is it a GSAP question? I very obviously have NO IDEA. So that's what I mean when I'm relating that - to me, GSAP is its own language? If I find myself "hunting" javascript to solve a problem, I'm most likely screwing up. And I did take the beginner javascript course that Carl recommended at CCC. The major stumbling block for me seems to be figuring out what these parameter things are and what order and why or if they're coded differently? GSAP is awesome regardless. But I honestly got into it thinking I didn't have to know that much javascript. Then it turns out that pretty much all of my problems aren't GSAP problems - they're... javascript problems? Again, just very honestly relating that I am still too ignorant to understand where one begins and the other ends. And whining that the only reason I'm dealing with javascript is to use GSAP. The world just ain't fair All of this to hopefully better relate - I PROMISE I'm not doing it on purpose.

My apologies again. The stupid errors were from a previous export from CodePen, linking to jquery for a stylesheet: <link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> Believe it or not, drop those bad boys into an export of the above CodePen, and all hell breaks loose Whatever it is does not play well with others. Minus that idiocy, no more errors and no more Safari errors and no more fans. I'd just thought Illustrator possibly pumped out weird SVGs with alphas. Terribly sorry for bothering everyone with my idiocy. I'm obviously new to all of this, my brain is apparently wiped with all of the coding. No clue how I didn't spot the useless stylesheet. Very horribly sorry. Instead of reading this idiocy, I hope you're getting some sleep.

The guidance here on GreenSock and from Carl at CCC have been SUPREME! I can promise you that I don't know where GSAP ends and javascript begins. The only reason I'm using javascript is to implement GSAP. But I do try to steer clear of "stuff" like this? I just thought maybe timeScale was special - that I wasn't allowed to call it on nested timelines? As far as hiring someone, I have to learn enough javascript to use GSAP. I look for examples and learn from how you gurus have put things together. I can take a code snippet, learn from it, rearrange it to get the job done. So I am very honestly trying my best to try to keep my questions to GSAP. If I screw up, I'm very sorry? From what little I understand, and I'm probably completely wrong? But I thought GSAP has its own special language that lives within javascript while allowing me to avoid javascript for the most part? So I promise that I don't know where I'm getting outside GSAP and falling into javascript world? But I promise I search and search and do my best to learn on my own before posting here. So is it cool if I post - and if it's off in javascript world beyond GSAP - then the moderators could just delete it or whatnot? Again, I promise I'm already trying to limit myself from posting here as much as possible. Only "brick wall" level stuff where I've been through it for hours and no solution. Mostly because of the possibly wrong concept I have about GSAP requiring GSAP coding and me mixing in javascript at my own peril? So I do my best to avoid doing that? Basically, hopefully obviously the very last thing I would wish to do is further annoy everyone

Safari delivers the message about shutting the window - but that's only if I just let it infinitely repeat. After a minute or so, Safari gets upset. Firefox is throwing up the alpha errors? There's a total of 7 of them I think? The only reason I mentioned it is because I thought maybe Illustrator tossed in alpha things that upset Firefox when I exported to SVG? I have no clue what an alpha is? I thought perhaps the mystery alphas might be what was upsetting Safari? But it'd be cool if there were a tool that would tell me I went too far with too many tweens at the same time - that it won't work on such and such devices? As usual, I have no clue as to whether such a thing exists? Here's a copy and paste of what Firefox is complaining about? Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:51:9 Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:519:10 Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:957:9 Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:964:9 Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:968:9 Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:1216:10 Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:1223:10

I don't understand code well enough to explain it - but logically There are "expressions" - A, B, C, D, etc. Each are called with their own variable that's an array. Then there's the body with what it's doing. As you related, it's on infinite repeat. I don't know how to tell the infinitely repeating body - "Hey, I'm calling C - I want you to speed up now. Then slow back down when I call D." There's no set time for when C happens? But when C is called, bodyAni needs to speed up, then slow back down for D. I have NO IDEA how to pull that off. Heck, I was crazy proud of myself for sticking an array in a function But absolutely no clue what it is you're explaining? I know the arrow functions are really cool, but that's about it. They're self-referencing self-enclosed things that forbid the outside world to mess with them? But there's a master timeline. Then there's the nested timelines. No nested nested timelines - so all of the nesters are equals. They held a parade about it. I teared up - it was so amazing... I finally got it working by assigning +=x to the bodyAni calls, followed immediately by < for D, so this actually works: .add(bodyAni(1.5)) .add(faceAni(start), 0) .add(pupilAni(1), 0) .add(faceAni(perturbed), "+=1") .add(faceAni(quiz), "+=3") .add(faceAni(normal), "+=2") .add(bodyAni(4), "+=1") .add(faceAni(happy), "<") .add(bodyAni(1), "+=2") .add(faceAni(quiz), "<") But I'm guessing it's not very good as far as correct programming?

I've been trying this every possible way, and I can't figure out how to code it correctly? function bodyAni(speed){ let tl = gsap.timeline( { // bodyAni:timeScale(speed) // defaults: { // timeScale: speed // } } ) tl.timeScale( speed ) // timeline I'm animating, for instance: .to("#catfish", { rotate: "random(-5, 5)", yPercent: "random(-5, 5)", xPercent: "random(-5, 5)", repeatRefresh: true, yoyoEase:true, duration: 10, repeat:-1 }, 0) return tl } The last one finally works, but once I call it a couple of times: master .add(bodyAni(1)) .add(faceAni(start), 0) .add(pupilAni(1), 0) .add(faceAni(perturbed), "+=1") .add(faceAni(quiz), "-=3") .add(faceAni(normal), "+=2") .add(faceAni(happy), "+=1") .add(bodyAni(5)) .add(faceAni(quiz), "+=2") .add(bodyAni(1)) //followed by other stuff - I'm obviously trying to increase the speed with //happy, decrease with sad, keep it normal otherwise. Once I switch it to 5, the animation just gets stuck? The happy animation just keeps playing at the 5x speed. The quiz animation never happens. The CodePen doesn't ever speed up - so I have no clue - but guessing I'm "calling" it incorrectly? But the CodePen fails to actually present the same problem. I was doing my best to "isolate" the issue, but... ?

Cool - so it's not really an issue then? I thought I'd tossed in some very bad mixture of tweens? And I don't know where I'm including jquery? Are the repeated Alpha - and sometimes small "a" alpha - complaints an actual issue? Firefox won't tell me which line - it just has about a dozen problems with various Alphas? And the Safari complaint - It only really happens when I'm testing and I let it keep running. About two minutes in, Safari starts whining about it. I am honestly just doing the best I can, guessing at what transforms to "get" the "movement" I'm hunting. But is there any tool that will tell me - "Hey, cut it out - the following devices now can't handle your code." So I know I've thrown too much at it and need to cut back? The "performance" bit in Firefox doesn't really make any sense - it's just FPS? Fully loaded, it sometimes drops to 20 FPS, but mostly at 60? I'm certainly not seeing a framerate drop that "looks" glitchy? And that's not just this bit of the animation - that's with everything rolling together.

I most definitely found it INSANELY helpful to use a PHP include. In my workflow, I'm editing in Illustrator, primarily dealing with morphing issues, but it's a constant back and forth - then exporting to SVG, and (thankfully) no more copying and pasting to and from the html file. It was a tremendous PITA Oh, and because PHP also didn't wish to play well - SVGs are just the batman level BANE of gotham coding city. Stupid rickem rackem SVG ruckem fruckem... Fred Flintscode even hates them. Anyhow - here's the code that finally worked for me: <?php echo file_get_contents("stupidhorriblepesky.svg"); ?>

Whatever I've done horribly wrong is causing Safari to scream that the page needs to be closed, and my MacBook is getting insanely hot. This webpage is using significant energy. Closing it may improve the responsiveness of your Mac. Also, the reason there's a master timeline and this movement is a function - this is just the bit to attempt to make the fish look like he's chilling in the water. Just trying my best to isolate and present what I believe the problem to be? Once I add this bit in, the fans kick on high. I tried commenting out various lines - for instance, I thought possibly the morph was the culprit? But possibly it just doesn't care for how I set up the endless repeats? Or all of the randoms? I obviously have no idea? Also, I'm still modifying the movement - hoping there's just one bit that's just not allowed or uses too much power? Possibly I could remove the power-hungry bit and substitute something else? Oh, and this is the error that Firefox is complaining about repeatedly in the javascript console: Expected ‘none’, URL, or filter function but found ‘Alpha(’. Error in parsing value for ‘filter’. Declaration dropped. jquery-ui.css:51:9 Elements matching selector: .ui-helper-zfix NodeList []

Theorizing? But I also had no idea what xPercent and yPercent actually did. I was just changing the numbers until I got the end result I wanted But I wrongly thought that each path had its own position, and I was moving relative to that position - I didn't understand that those percents were actually relative to the SVG as a whole, so they don't have anything to do with the starting positions. Sorry for asking so many stupid questions - but, not kissing up, I'm always amazed how SIMPLE the solution is to what logically seems like a nightmare to me In my mind, xPercent and yPercent were just fancier versions of x and y pixel movements "set up" to "cope" with relative positioning. Very glad to know that, regardless of where anything is, those values actually specify a "set" yet "relative" position WITHIN the parent SVG

I'm dealing with multiple expressions - as the eye changes shape, rather than moving an xPercent and yPercent to "get" where I want the pupil to be - Can I instead set the "end position" and direct a move to that position - relative to the SVG, so that it remains responsive? If I sound like I'm spouting garbage - if I'm going from expression 1 to 2 to 3 to 4 - then everything's fine obviously. I can play around with xPercent and yPercent to find what those values need to be. But, if on click or for whatever reason, expression 2 is required, then I don't have a clear xPercent and yPercent movement to "get there" - I don't think - because I can't know the starting position?

Thanks - again, I appreciate everyone's patience - I'll do my best to make certain I stick to GSAP issues in the future. And it honestly didn't hit me that php include very literally includes - so probably my best option? But - just tossing it out there - my hope at least is that inline SVG will go the way of inline everything else? Where it can be done if it's a tiny SVG - but I'm not forced to do it? I just thought I'd missed the new command - seems very odd? For me, at least, SVG has both the visual bit, that I can edit with a visual editor - and then whatever the visual editor changes, which is then reflected in the SVG file in VSCode when I save in the visual editor. But, with the SVG buried in the HTML, that's not even an option. So I'm just constantly copying and pasting between the opened SVG and the HTML - which hopefully I'll no longer be doing by using PHP include I don't mind having it inline for the final, where I can avoid PHP altogether - but, for editing, it's most definitely a PITA.

After exporting from Adobe Illustrator to SVG, Illustrator refuses to then open and edit the SVG that Illustrator exported? Lovely. I apologize if this is inappropriate to post here. I just supposed most folks here use Illustrator in their workflow and might be able to explain how to avoid this issue? Quite obviously, this is creates a rather huge PITA - and now I'm self-referencing Most likely the entire problem is due to yet another of my user errors. Oh - and for search purposes: The following items could not be imported properly: Clipping will be lost on roundtrip to Tiny

I don't understand how this is working? It appears to be loading the external SVGs through the script.js? It would be SO EXTREMELY HELPFUL to NOT have to copy and paste the SVG inline into the HTML code - I could then edit the SVG separately in a dedicated SVG editor - it's a rather complicated SVG and it would be much simpler to directly edit the file within Illustrator, export, and see those changes reflected without the hassle of copy and pasting? Further, I usually end up editing Illustrator's SVG in Boxy SVG. And my apologies if I'm not supposed to resurrect older posts. Searching for how to do this, everything seemed outdated? This post references Chris Coyer: https://css-tricks.com/using-svg/ And then your post seems to be the proper solution - but I don't have the knowledge of javascript to understand how to implement it? And, for all I know - this isn't even an issue now? But my possibly ignorant attempts to embed as an object within the HTML have failed - so possibly this remains the solution - but I can't "read" it? Normally the gurus have //comments explaining what the heck is going on for us morons?

Oh, also - I clearly have NO CLUE what I'm doing. I promise that I try my best, I scope the search engines - which usually lands me back at this forum - trying to find solutions BEFORE pestering anyone here But I am doing my best to keep notes - possibly I can provide some version of a Complete Idiot's Guide to GSAP once I complete my project? Honestly, the MAJOR bummer is that every time I learn anything, I found out I have to learn something else to understand the first thing I didn't understand, which most of the time leads to me having to learn something else to understand the something else to finally grasp the first thing. BUT - for the most part - GSAP just WORKS!!!! And I'm always amused at myself as to how stupid my questions seem once I finally grasp the fourth or fifth dimension of things I didn't have a CLUE about So I do so greatly appreciate everyone's help - and especially your PATIENCE with me. THANK YOU SO VERY MUCH!!!!! For instance - with this issue - thanks to all of the info you provided - I opened Boxy SVG for the first time, loaded up the offending "paths" - just started obliterating all of the nonsense extra paths Illustrator created on export, believing that they were screwing everything up - And then I feel like an idiot for having asked the question in the first place. But I wouldn't have figured it out without your guidance But I still very honestly don't understand the proper way of using the shapeIndex tool? If it's offensive for me to fork that - if I'm just using it completely the wrong way? There is a TON of code I have absolutely NO CLUE in the javascript in that particular demo and I have no idea what ANY of it means, other than "Oh, I'll switch out that path with the path from the SVG I just replaced in the HTML" - So, to the best of my extremely limited knowledge, I just forked it, tossed in my offending morph paths - and I now I think I hope I "get" why the GUI is floating in front? Because maybe the SVGs are so huge they need all of the space in the background? I'm not a fan of editing anything on CodePen - so normally I just export whatever and edit the dist version in VSCode. Probably because I'm such a noob, trying to edit within CodePen? That's a freaking nightmare for me. Trying to highlight anything for delete or edit? It just jumps and highlights EVERYTHING. Ah well... Again, thanks so very much for all of your patience as I continually adjust to the learning curve