Multiple GSAP Motion Path Traces on the Same Timeline Simultaneously

[rcneil]

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!

[rcneil]

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?

[OSUblake]

2 hours ago, rcneil said:

Just performing a head snapshot with Chrome devtools it's like 365MB upfront. 

 

Are you running out of memory? And how much of that can attribute to GSAP? Most memory is going to be allocated to stuff like graphics, like your SVGs. Objects like GSAP are small. 

 

Google "premature optimization is the root of all evil".

 

And if you can make a minimal demo we might be able to offer more advice. Code snippets are rarely of any help because we can't see what that code does. 

 

[rcneil]

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

See the Pen OJmRyEK by rcneil (@rcneil) on CodePen

 

The second is using large external images. 

See the Pen yLbaYwM by rcneil (@rcneil) on CodePen

 

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.

[OSUblake]

Thanks for demos @rcneil

 

It's crashing for me too. I think we'll need to do some investigation. I'm seeing a massive memory footprint running it on CodePen.

 

 

[GreenSock]

Sorry about that, @rcneil. Your demo exposed an edge case that caused the speed optimization algorithm to use too much memory. It's a long story, but it basically stores a lookup table as an Array for super-fast calculation of path positions, but your particular path had two anchors SUPER close and that ended up with the Array having over 10 million values. I believe it is fixed in the next release which you can preview (minified) at:

https://assets.codepen.io/16327/MotionPathPlugin.min.js

 

(You may need to clear your cache)

 

Better? 

[rcneil]

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? 

[GreenSock]

8 hours ago, rcneil said:

UN-REAL how amazing this community is!  That absolutely resolved the issue and the JS heap is a fraction of what it was before!

Fantastic. 🎉

 

8 hours ago, rcneil said:

I see threads suggesting donations are optional.... where do I go to donate? 

You don't owe us anything. I sure appreciate the thoughtfulness, though. The way we get support is via Club GreenSock. Check it out - you may find that it pays for itself in a single project with all the bonus time-saving plugins you get. But again, no need to feel any obligation. We trust that as long as we keep pouring ourselves into creating top-quality tools and supporting them well, the community will respond and support our efforts. We've been doing it for well over a decade and I'm grateful to say that our trust in the community has been well-placed. 🙌

 

Enjoy!