Jump to content


set() only being called for 1st target in array for custom plugin

Moderator Tag
Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm working on a custom plugin that is project specific.  Basically, I created a class that represents an SVG arc and the plugin will tween the rotation of the arc around a point and change its thickness etc.  


Everything works perfectly except when I try to pass in an array of targets, in which case only the first element in the array is tweened, despite init() being called and run successfully.  I've spent all day trying to figure this out and I can't make any headway, and I was hoping someone here had seen something similar and could give me some insight.


I copied the code over to a codepen to see what I'm talking about, but it is probably easier to just to clone the repo: https://github.com/tysmithnet/gsap-svg-arc-plugin

Just load up index.html


Key files:

SvgArc.js - class abstracting the svg arc, pretty much just knows how to create an SVG path

gsap-svg-arc-plugin.js - the gsap plugin

index.html - test file illustrating the issue


Thanks for looking!



See the Pen RWPNdy by tysmith (@tysmith) on CodePen

Link to comment
Share on other sites

  • Solution

I didn't have time to look through all your custom code, but I figured I'd offer just a few comments based on my cursory glance:

  1. init() is supposed to be called once per target. From what I can tell, it's doing exactly that. Were you expecting it to pass the array of targets to the init() one time? 
  2. I noticed you didn't follow the docs or the TweenPlugin template that we provided - any particular reason why? It makes it a lot more difficult to troubleshoot when you don't follow the template/instructions. 
  3. It may have to do with the way you're handling scope (this/_this). I see that you're creating an instance of your plugin rather than passing a simple object to the _gsDefine.plugin(). I'm not saying there's anything "wrong" with the way you're doing it necessarily - I just wondered based on my cursory glance and the fact that you said it's only handling the first one the way you expected. 
  4. I'd strongly recommend avoiding the use of "eval()" in your JavaScript. It is notoriously slow and many consider it to be a security hazard. 

We really try to stay focused on the GSAP codebase itself in these forums as it can get super time-consuming to look through and troubleshoot other people's custom plugins but hopefully these comments are at least a little bit helpful :) 


Oh, and I noticed you put a "Scramble" plugin out on github that sounds a lot like our members-only ScrambleTextPlugin. Hm. That was kinda disappointing to see. 


Anyway, good luck with your projects. 

  • Like 3
Link to comment
Share on other sites

I changed it a simple object and everything worked as expected.


And sorry about the scramble plugin, I'll take it down


Thanks again.

Link to comment
Share on other sites

Great, glad it's working. 


And yeah, it'd be gentlemanly of you to take that Scramble plugin down, but that's up to you. Thanks a bunch. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.