Jump to content
Search Community

Draggable - open source

pauliescanlon test
Moderator Tag

Recommended Posts

Hey all, i used to use GreenSock a lot back in my ActionScript 2.0 days (circle 2005) but have been out of the animation game for some time... i'm so pleased the project is still alive and well!


I've been talking with Chris Gannon and have re-created his brilliant svg-bubble-slider: 

See the Pen GZNgLw by chrisgannon (@chrisgannon) on CodePen

 and i plan to open source it as a React / `npm` module.


storybook WIP: https://5ecbca87213967000683ec12--react-svg-bubble-slider.netlify.app/?path=/docs/intro--page

repo: https://github.com/PaulieScanlon/react-svg-bubble-slider

branch: https://github.com/PaulieScanlon/react-svg-bubble-slider/tree/feat/gsap-draggable


I've encountered one or two issues but before i break them out into multiple topics i wondered if i could list a few things i've have questions about / have had trouble with.



1 . Is Draggable part of Club GreenSock?

2. Is ThrowProps part of Club GreenSock (i think it is)?

3. If i plan to open source this project AND have paid for BusinessGreen am i ok to open source the project. The plugin code would be minified and bundled and i i'll .gitignore the plugin source as this will be a public repo



1. I'm not sure quite sure if this is just me mis-understanding the imports but is this the correct way to use imports?

import { gsap, TweenMax, TimelineMax, Linear, Elastic, Power1 } from 'gsap'
import Draggable from 'gsap/Draggable'


2. With Draggable imported this way i now run in to issues with Jest, can anyone advise on how to either mock the module or use jest config to ignore it?

3. Similarly when i use webpack to bundle the module build i think i'll need to also transpile Draggable, is there a CommonJs trick i'm missing here?


Thanks so much team! 


See the Pen intro--page by ?path= (@?path=) on CodePen

Edited by pauliescanlon
add storybook link
Link to comment
Share on other sites

Draggable is not a Club GreenSock member-only plugin but ThrowPropsPlugin is. Actually, it's now called "InertiaPlugin" as of GSAP 3 (more intuitive name, but functionality is basically the same, though there are a few improvements). 


If you'd like to open source your project...

  1. Please do NOT include any of the members-only plugins (like InertiaPlugin/ThrowPropsPlugin), otherwise that'd make it super easy for anyone to steal without signing up for Club GreenSock. 
  2. Please make sure to note (for your users) that the GreenSock files are subject to their own license which can be viewed at https://greensock.com/standard-license

As for the imports, I have zero experience with Jest but here are a few things to keep in mind: 

  • I hope you're using GSAP 3.x. If so, you don't need to import TweenLite, TweenMax, TimelineLite, TimelineMax or any of the eases. The newer, more modern syntax simplifies things quite a bit. See
  • If you're using a bundler that doesn't understand ES Modules, you can use the ES5 files from the /dist/ directory, like:
    import { gsap } from "gsap/dist/gsap";
    import { Draggable } from "gsap/dist/Draggable"; 
    See the installation guide at https://greensock.com/install for details. 

FYI, we're getting close to releasing GSAP 3.3.0 which has some edge case bug fixes in place for Draggable. 


Happy tweening/dragging!

  • Like 2
Link to comment
Share on other sites

Hey Paulie and welcome to the GreenSock forums!


45 minutes ago, pauliescanlon said:

i used to use GreenSock a lot back in my ActionScript 2.0 days (circle 2005) but have been out of the animation game for some time... i'm so pleased the project is still alive and well!

We are happy about that too! GSAP is better than ever :) 


There's a GSAP overview on the docs homepage that shows exactly what is and isn't included in Club GreenSock. The Club page also has a listing along with demos of each.

Link to comment
Share on other sites

@GreenSock Thanks for the response. Just to clarify one point:


Please do NOT include any of the members-only plugins (like InertiaPlugin/ThrowPropsPlugin), otherwise that'd make it super easy for anyone to steal without signing up for Club GreenSock.


Does apply to bundled code?, i can appreciate not having the source available in a public repo... but if the bundled module includes the members-only plugins it'll be all mashed together with the rest of the module code. I don't think it would even be possible to steal it from there... would it?


That said, if the general preference is no members-only plugin code can be used on any bundled or public facing URL that's ok, can you confirm what the restrictions are... sorry to be a pain! 


Link to comment
Share on other sites

To be clear, "Business Green" members get a license that covers all their Work Products while the membership is active, so it's totally fine to have the members-only plugins in their Work Products (as long as they're only used in the unedited Work Products - their customers shouldn't be ripping out the GreenSock tools and using them elsewhere without getting their own license of course).


The complicating factor here is that you're asking about inclusion in an open source project which signals to your audience "this is totally free to use in any way you want...zero restrictions of any kind". We certainly don't mind if you get the appropriate GreenSock license and then use the tools in your projects and distribute those however you please...charge whatever you want for them...but putting the GreenSock files into a Github repo (or whatever) that's advertised as open source makes things a bit awkward. 


We're willing to grant permission on a case-by-case basis (others may be reading this in the public forums, so we can't just offer a blanket statement across the board because there are some scenarios I can imagine where it'd be inappropriate). Perhaps you could send us your bundled code and if it's sufficiently obfuscated and you don't include the source files for the members-only stuff, we can make this work. Our goal really isn't to get in the way of customers like you getting your creative work out into the world with as little friction as possible. Hopefully you've seen our track record with that - we just need to be careful about creating loopholes that'd end up ruining the very thing that's allowed us to to keep refining the tools and delivering solid support to folks like you. See what I mean? But again, I'm pretty confident we can make it work for your particular case - hit us up privately when you're ready. 

  • Like 2
Link to comment
Share on other sites

Thanks again @GreenSock and yeah i totally understand.

The plan would be to never commit any members-only source code to the repo but if i use it in the module it will be there in the production bundle... the problem i now have is i haven't purchased a licence because i didn't want to spend the £123 if it later transpires i can't use the code.


I've attached my current bundle which does include free gsap code so you can see what it looks like... will this suffice?


Link to comment
Share on other sites

Yeah, that bundle actually makes it look pretty easy to isolate and lift. I figured you'd send your actual project's bundle, not just the GSAP files. Maybe it'll be more obfuscated in your final stuff(?) 


As for not spending the money if you don't need to, I totally understand. Keep in mind that we offer a satisfaction guarantee. If you're not happy...for whatever reason...we'll gladly refund the full purchase price. We're passionate about having happy customers around here. We don't want your money if you're not thrilled with the value you get. 

  • Like 2
Link to comment
Share on other sites

@GreenSockHey, that is the project bundle. "My code" is just a single svg and some g elements (which you can see at the top of the bundle) 


That's all there is to it i'm afraid. There might be one or two small things that i add later but it will never look like a huge web build bundles because it's just one small React component.


I'm happy to go buy Business Green so i can show you what the bundle will look with the member-only plugins included but i suspect it won't look hugely different.

Link to comment
Share on other sites

Ah, I see. Well, I think it's best not to include it then, and just tell people that InertiaPlugin is a requirement for your script to work - they can get/load it themselves (and provide a link to Club GreenSock or something - totally up to you). As it stands now, your bundle has the minified code nicely organized and labeled, so it'd be pretty darned easy to just copy/paste. See what I mean? It's totally fine, though, to link to a demo where you've got your bundle loading and people can see everything working in the browser. We'd just rather the members-only source not be in your "open source" Github repo. Fair enough?

  • Like 1
Link to comment
Share on other sites

Hey @greensock thanks again for the response. I’m still not quite clear about what you’re saying. The members-only code won’t be part of the public repo that’s fine. But it will be part of the bundled code and if a user were to install my package via npm they could dig into their node_modules find the main.js file and would see the members-only plugins in its minified form. This is no different than visiting a website that has used a members-only plugin opening the network tab and inspecting the websites main Js bundle. I don’t think you can fully protect angaints members-only code in JavaScript because it’s always loaded in the browser and anyone could potentially steal it from any website that uses it. 🤷‍♂️


i feel in my case it’s the same thing excepts it’s not a website it’s an npm package


i can have webpack remove the Greensock comments to make it more difficult to identify the minified plugin code.


I cant add the members only plugin as a peer dependency because the members only plugins aren’t npm modules so I’m not sure how a user would pay, download and then add them to the project because the package has already been bundled 🤷‍♂️

I get the concerns about giving members only code away for free and I’ll do what I can to prevent exposing the plugin source but as mentioned before, it’s JavaScript and if someone really wants to steal it they can because it’ll be there in the browser like it is with any website. 

Link to comment
Share on other sites

Oh, of course - we're fully aware that if someone really wants to steal it, that ain't terribly difficult. But it's one thing to be loaded behind the scenes in a web site, and quite another to be in an "open source" repo that's specifically designed to make it super easy for developers to snag/view/edit, advertised as "open source". See what I mean?


Frankly, we spend pretty much zero time hunting down violators or policing things. We focus our energy on making the tools better and helping people in these forums, trusting that our posture will be rewarded in the marketplace and appreciated by our users. I just can't offer my official blessing to having our members-only plugins in an open source repo. I hope you understand. But do what you feel is right and rest assured that we're not gonna come chasing you down threatening a lawsuit over this. That's not how we roll around here. ;)


Oh, and thanks for offering to remove the comments in the code, but that'd actually be worse because those copyright and authorship notices are essential. 


I can tell by how you're approaching this that you're the kind of guy who wants to respect other people's code and you'll take steps to ensure that your users know that the GreenSock files are subject to their own license, so I trust you. I'm confident you've heard my concerns and will make a good decision. 👍

  • Like 3
Link to comment
Share on other sites

30 minutes ago, GreenSock said:

Oh, of course - we're fully aware that if someone really wants to steal it, that ain't terribly difficult. But it's one thing to be loaded behind the scenes in a web site, and quite another to be in an "open source" repo that's specifically designed to make it super easy for developers to snag/view/edit, advertised as "open source". See what I mean?


Theoretical here. How you would feel if the gsap-bonus.tgz was in a public repo, but renamed something different, and nested inside several folders so it wasn't obvious?


It seems that most users don't have a good understanding of what's going on with the .tgz file. They just think gsap shows up magically.






Link to comment
Share on other sites

Thanks again @GreenSock i'm still not sure if we're on the same page though.


The members-only plugin won't be in the public open source repo but it will be part of the bundled main.js code as any other website would be.


So i think what you're saying is so long as i don't include the source file in the repo we're ok?

Link to comment
Share on other sites

Just to follow up.... i've purchased a BusinessGreen account. 

  1. The inertia plugin is now part of the npm module: https://www.npmjs.com/package/react-svg-bubble-slider
  2. As you'll see i'm not committing dist/main.js or any node_modules to the open source repohttps://github.com/PaulieScanlon/react-svg-bubble-slider
  3. The import statement and registerPlugin are however still part of "My" source code which is part of the open source repo: https://github.com/PaulieScanlon/react-svg-bubble-slider/blob/master/src/components/SvgBubbleSlider/SvgBubbleSlider.tsx
  4. As mentioned before if someone wanted to steal the code they could inspect the bundle as you can with any other website: https://react-svg-bubble-slider.netlify.app/?path=/docs/intro--page
  5. Once someone installs this module using eg: `npm install react-svg-bubble-slider` they could in theory dig into the main.js file in node_modules which has all "My" code minified and bundled together with GSAP code and steal it the same way they can from any public facing website
  6. I've attached the main.js bundle for your reference but do let me know if you'd like me to remove it from this post as technically this is the same thing giving away the plugin for free. 


I hope this is ok, using the inertia plugin really makes this thing cool and it would be a shame to have remove it.



Link to comment
Share on other sites

Thanks again for working to be above-board on all this. 

  1. It looks like your license file shows only MIT and theres' no mention anywhere of the GreenSock files being licensed differently. I'd sure appreciate if you offered some kind of clarification about that somewhere in the repo. If there wasn't a trace of GreenSock code in the repo, that wouldn't be necessary but if I understood correctly, you do include GreenSock code in what users can grab from this "open source" repo, so it isn't fully MIT-licensed. If you remove GreenSock source code and just tell people it's a dependency, you're golden.
  2. Thanks for making sure you don't have the source easily-accessible in the repo. That helps. 
  3. It's absolutely fine for you to have the registerPlugin() and all the other GreenSock-related references that you wrote yourself. 
  4. My official recommendation: do not include any GreenSock members-only code in any open source repo but instead tell people your tool requires InertiaPlugin from GreenSock and link them to our site. As for installing it, we've got pretty clear instructions, videos, and an interactive tool that make it easy. They can literally drop the tgz file into their directory and run "npm install ./gsap-bonus.tgz". Done. That being said, I'm not looking to make a big stink about how you're doing it currently. I'm just saying I cannot endorse it. 
  5. I removed the js file from your post above because you're right - it had the members-only plugin source nicely labeled in there :)

Side note: I assume you got Chris Gannon's permission, right? 


Other side note: Gannon is awesome. ;)


Good luck with the project! We're honored to have you using GSAP and showing other people what's possible with it. 

  • Like 2
Link to comment
Share on other sites

Hey @GreenSock Thanks for the response. 


I'm still a bit worried we're not on the same page here.


There is no GSAP members-only code in the repo but there is members-only code bundled in the npm module.

The code on GitHub is source code (excluding gsap-bonus.tgz)

The code on npm is minified bundled code (including minified gsap-bonus), it can't be seen unless you install the module using npm i or yarn add. 


if you install this module you could dig into the node modules and extract the members only plugin code the same way you can dig in to any websites minified bundled js file.


If this module is used on any website the same applies, you could in theory dig into the bundled minified js and extract members-only code.


I can't add gsap-bonus.tgz as peer dependancy and i can't ask users to install it because even if they did there's no way to re-compile the node module.


I'm happy to add links to GSAP and / or mention the npm module uses members-only code but was worried about calling it out in the README because this only adds to the concern that it tells these sneaky stealers that if they look in to the bundled minified js they'll be able to steal members-only code.... the same way they can with any website that uses members-only code.


Chris is on board, in fact today we merged his first PR on the project, he removed some old v2 GSAP references i had in there. It's now all GSAP 3 and working well.


Side note. I've spoken with the Dev Rel at Netlify and have agreed to write a post for them about how to use this project to add reactions to a Gatsby Blog. It should go out on the Netlify blog/news letter in a few weeks. I've advised Chris and I'll be sure to mention you both in the post with links etc.


If you're on board i'll carry on with development, just wanna make sure we're all clear on how GitHub and npm differ


Link to comment
Share on other sites

That's definitely good news that there is no GreenSock code in the github repo. Excellent. As for NPM, that's still technically showing as MIT-licensed open source and there's no mention of GreenSock code being licensed separately nor is there a link to where folks can get the GreenSock files. I appreciate you being cautious about pointing out the bonus plugin in the readme, so it'd probably be best to offer a blanket statement about the GreenSock files (no need to mention specific plugins...although I don't mind that either if you prefer). Something along the lines of "GSAP and all GreenSock files are subject to the standard GreenSock license which can be found at https://greensock.com/standard-license" (you don't have to use that exact wording).


That's great to hear that your work will be featured in the Netlify blog and newsletter! Again, I love that you're spreading the word about what GSAP can do and shining some light on Chris Gannon's skills. 🙌

  • Like 2
Link to comment
Share on other sites

Hey @GreenSock Thanks again. I haven't changed the README yet, i was waiting for a response. I'm happy to add the above and it'll show up next next time i commit and push!


I'll let ya know when the post goes live! 


Thanks so much for all your time on this one, i know it's been tricky! 

  • Thanks 1
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.
  • Create New...