rcneil

Man, you were 100% correct again! I had 3.2.6. Updating to 3.11.4 resolved the issue.

Figured I would tie back into this thread considering I ran into the same problem on another SVG and maybe someone will stumble upon this. Strangely, again through Inkscape I am receiving path data like this: <path id="line1" stroke-dasharray="8.99887, 14.9981" stroke-width="3.999" d="m614.2 2-335 358.38" mask="url(#dash-mask-1)"/> In spite of running it through SVGOMG or any other resource, the path data is always formatted like this. When using it with the MotionPath Plugin, it has trouble with this malformed SVG data. Technically, it should be like this, with a space between the second negative X value: <path id="line1" stroke-dasharray="8.99887, 14.9981" stroke-width="3.999" d="m614.2 2 -335 358.38" mask="url(#dash-mask-1)"/> There were a few paths I had in my SVG where no space existed between the first X,Y point and the second X,Y point if the X was a negative value. I guess it got treated like a hyphen. Not sure. Even more strange, I was using a CodePen to troubleshoot and it had no trouble with this original syntax. It was only when I moved it into production that the MotionPath path became misaligned, though there were far more elements at play and the order with which the code was served may have been different (i.e. the Javascript came before the HTML, or vice-versa, etc). https://codepen.io/rcneil/pen/KKBzBYd Hope this helps someone in the future!

UN-REAL how amazing this community is! That absolutely resolved the issue and the JS heap is a fraction of what it was before! Thank you for all of the assistance @GreenSock & @OSUblake! Feel free to modify the thread title to something more related as I started out really troubleshooting blindly. I see threads suggesting donations are optional.... where do I go to donate?

I do find myself running out of memory as I increase the amount of elements in my GSAP animation using motion path, so I'm not sure what to attribute it to. If I completely remove the module and do not call GSAP and the motion path library, my head snapshot/JS heap size is 5MB. With just one element being called with GSAP, it's about 65MB. Every element I add it increases substantially. I made two codepens, both using 10 elements that are tracing different SVG paths. The first codepen () is using simple SVGs https://codepen.io/rcneil/pen/OJmRyEK The second is using large external images. https://codepen.io/rcneil/pen/yLbaYwM I've run memory audits with inconsistent results to determine if there's any variation because of how intense the graphics are. Funny enough, both crash and burn for me trying to run within the iframe embed within this post. I may be going down the wrong rabbit hole or not even auditing these correctly, though, like you suggested. Any insight is greatly appreciated.

I've made some progress... I think... jQuery(document).ready(function($) { gsap.registerPlugin(MotionPathPlugin); gsap.timeline({ defaults: { ease: "none", duration:10.5 }, repeat: -1 }) .to("#logo-circle-1", { motionPath:{ path: ".orbit-trace-1", align: ".orbit-trace-1", start:0.5, end:1.5, autoRotate: false, alignOrigin: [0.5, 0.5] } }) .to("#logo-circle-2", { motionPath:{ path: ".orbit-trace-2", align: ".orbit-trace-2", autoRotate: false, alignOrigin: [0.5, 0.5] } }, 0) .to("#logo-circle-3", { motionPath:{ path: ".orbit-trace-3", align: ".orbit-trace-3", autoRotate: false, alignOrigin: [0.5, 0.5], start:0.5, end:1.5 } }, 0) .to("#logo-circle-4", { duration:10.5, motionPath:{ path: ".orbit-trace-4", align: ".orbit-trace-4", autoRotate: false, alignOrigin: [0.5, 0.5] } }, 0) .to("#logo-circle-5", { motionPath:{ path: ".orbit-trace-5", align: ".orbit-trace-5", autoRotate: false, alignOrigin: [0.5, 0.5], start:0.5, end:1.5 } }, 0) .to("#logo-circle-6", { motionPath:{ path: ".orbit-trace-6", align: ".orbit-trace-6", autoRotate: false, alignOrigin: [0.5, 0.5] } }, 0) .to("#logo-circle-7", { motionPath:{ path: ".orbit-trace-7", align: ".orbit-trace-7", autoRotate: false, alignOrigin: [0.5, 0.5], start:0.5, end:1.5 } }, 0) .to("#logo-circle-8", { duration:10.5, motionPath:{ path: ".orbit-trace-8", align: ".orbit-trace-8", autoRotate: false, alignOrigin: [0.5, 0.5] } }, 0) .to("#logo-circle-9", { motionPath:{ path: ".orbit-trace-9", align: ".orbit-trace-9", autoRotate: false, alignOrigin: [0.5, 0.5], start:0.5, end:1.5 } }, 0) .to("#logo-circle-10", { motionPath:{ path: ".orbit-trace-10", align: ".orbit-trace-10", autoRotate: false, alignOrigin: [0.5, 0.5] } }, 0); }); but... this still feels wrong to me. And it still appears like I'm putting a huge tax on my memory. Just performing a head snapshot with Chrome devtools it's like 365MB upfront. Is that expected for GSAP and with multiple motionPath traces like this? If I remove all but "#logo-circle-1" and that tween, it's 64MB. How can I be more efficient?

I am using GSAP and the Motion Path Plugin to trace multiple objects across multiple SVG paths. I would like them to run simultaneously, some of them having slightly offset starts/ends. I was doing something like this: if($('#logo-circle-1').length) { gsap.to("#logo-circle-1", { duration:10.5, repeat: -1, ease: "none", motionPath:{ path: ".orbit-trace-1", align: ".orbit-trace-1", start:0.5, end:1.5, autoRotate: false, alignOrigin: [0.5, 0.5] } }); } if($('#logo-circle-2').length) { gsap.to("#logo-circle-2", { duration:10.5, repeat: -1, ease: "none", motionPath:{ path: ".orbit-trace-2", align: ".orbit-trace-2", autoRotate: false, alignOrigin: [0.5, 0.5] } }); } ....which... after adding more than 2 of these I now realize is TERRIBLE for memory and probably incredibly inefficient. How should I be doing this to chain these together for one GSAP tween and have them run simultaneously? Is there a fallback so if I have a tween set up for #logo-circle-1, #logo-circle-2, #logo-circle-3, #logo-circle-4, etc and one doesn't exist it won't break the entire tween? Many thanks GSAP friends!

Thanks a bunch @elegantseagulls and @PointC. Both approaches are great and help illustrate why this library (and community) are so awesome.

I'm reading the docs and it seems there is a way to use "non-positional properties" like scale during a motion path trace, but I am unsure how to implement. In the Codepen provided, I have 3 circles "orbiting" a path, which is great! But, I'm hoping to have them scale up and down as they move along path to resize and simulate depth of going forward and backwards, too. How do you apply the scale transformation during this process? Thanks GSAP community!

Ah! That makes sense. I actually used Inkscape to draw the SVG. Just opened up a new file, grabbed the "Pen Tool" and drew it up. Wonder why the path data markup is so malformed from that. It always renders as expected in the browser but it sounds like it isn't correct. Either way, thanks for troubleshooting! Very appreciated.

I'm using the MotionPath plugin and it seems to be doing exactly what I need with a slight hiccup. It is tracing the path perfectly, but it appears to align my animating object at the start of the SVG viewbox rather than on the actual path itself. Is there something I am doing incorrect? Adjusting the animating object via CSS whether "left" or "translateX" does not work. I would think "alignOrigin" should stay centered. Am I supposed to set a "offsetX" property here or am I actually configuring this incorrectly in the first place? Thanks for the help!

Sahil, this makes a lot of sense. Thank you for explaining everything and providing examples. I have just started to scratch the surface of what GSAP can do but this definitely points me in the right direction. Cheers!

Can I chain TweenMax "fromTo", though? Like this? var master = new TimelineMax(); var tl1 = TweenMax.fromTo(".frame.frame2", 1, {y: "0%"}, {y: "300%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame1", 1, {y: "0%"}, {y: "-300%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame4", 1, {y: "-100%"}, {y: "200%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame3", 1, {y: "100%"}, {y: "-200%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame6", 1, {y: "-200%"}, {y: "100%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame5", 1, {y: "200%"}, {y: "-100%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame8", 1, {y: "-300%"}, {y: "0%", ease: Linear.easeNone}, 0) .fromTo(".frame.frame7", 1, {y: "300%"}, {y: "0%", ease: Linear.easeNone}, 0); master.add(tl1); I have tried created them both as new TimelineMax() timelines and then adding them to a master, but that doesn't work, even with implicitly setting position to 0. They still run one after another...

I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that background images is what I had desired. I have the position attribute set to 0 so they fire simultaneously. What I don't understand is how to set up a separate, independent timeline to the same pinned element for the overlaying text to fade in and out. The duration attribute is overridden because of Scrollmagic, so what can I do? Should I try to chain together TimelineMax() tweens? Should I create 2 pinned elements and overlay them on top of one another? You can see my codePen and see I am almost there, but I feel like I am not fully grasping how the the pinned elements work with Scrollmagic or how to chain together the tweens. I have experimented with a lot of variations but my understanding is limited. Any help is greatly appreciated.