Jump to content
Search Community

Embeddable CustomEase editor / visualizer

Manfrex test
Moderator Tag

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

Hello!

I was wondering if it's possible (or if it already exists) to embed the GSAP CustomEase visualizer onto another page (was thinking a chrome extension)? Or if its hosted by itself somewhere?

 

I find it to be a bit of a hassle to always go to the https://greensock.com/ease-visualizer page. You have to wait for it to load etc. It would be nice if we could have the ease visualizer to play around with.

 

Thank you!

Link to comment
Share on other sites

That's not something we currently offer, but we'll definitely consider it for the future. If anything, it'd probably be in the download zip for account holders (since CustomEase is only available to account holders). 

 

Is the greensock.com/ease-visualizer page not loading well for you? Is that the main reason for your request? 

Link to comment
Share on other sites

I was also just about to post asking if I could utilize the ease visualizer for the GUI I am building. I would want to host it myself so I could modify the look / feel to match my application is why I would want to not use the main page - as well as not directing users of my GUI offsite to get the effects tuned.

 

If I am reading this correctly: https://greensock.com/forums/topic/7952-javascript-custom-ease/?p=61895 there isn't any conflict in downloading and embedding it into my application.

Link to comment
Share on other sites

It's fine to just use for your own personal use as a convenience, but no, we're not prepared to sublicense the ease visualizer for use in 3rd party applications. It's not officially part of the codebase that we distribute and license at this point. That's a different ball of wax that could have broader implications (especially support, plus you'd need to have protections in place to help prevent giving folks free access to CustomEase that's for GreenSock account holders only). We built the Ease Visualizer as a service to our users and to help drive traffic to our site as well. 

 

If anyone wants to sublicense the visualizer, feel free to reach out to us directly and we can discuss terms. It'd require some extra effort on our part to refine the code and figure out what it might take to support that type of usage, but we're certainly willing to chat with folks who have interest in getting behind that. 

 

The other thread you linked to mentioned a different MIT-licensed curve editor which is probably totally fine to use in your app (we have nothing to do with that tool, but OSUblake said it was MIT-licensed). Maybe that's what you were talking about this whole time :)

  • Like 2
Link to comment
Share on other sites

Hi @ajhalls,

 

For ideas on how you could create your own visualizer, check out this thread. I posted a bunch of different ways to create and manipulate paths.

https://greensock.com/forums/topic/14810-easing-feature-request/

 

I made a couple proofs of concept using paper.js. Note that those demos are not using the actual CustomEase as they were made before it was released.

See the Pen b7f5c5b3456eef085930d08d91b1cb1c?editors=0010 by osublake (@osublake) on CodePen

 

But you could do something similar to what I did as far as making editable paths. On every path object in paper.js is a pathData property, which you could plug into CustomEase and it should be able to convert it into an ease.

 

.

  • Like 2
Link to comment
Share on other sites

Well, maybe...

 

@@GreenSock, I just noticed that when I copied and pasted the pathData from my paper demo into the ease visualizer, it doesn't seem to be parsing the relative path commands correctly. Actually, I could even paste it, so I tried it using the url method, and the ease just ends up being a vertical line. Am I doing something wrong here?

 

Example path...

M50,550c116.16667,-9.83333 232.33333,-19.66667 349,-103c116.66667,-83.33333 233.83333,-240.16667 351,-397
Link to comment
Share on other sites

No, it didn't look like that for the url, but if it needs to be cleaned, that could explain part of the problem. The only reason I tried the url is because I could not paste anything into the editor. I thought it might have been a problem converting the path data generated by paper, but I see it's not.

 

I don't know what the exact problem is, but it won't let me paste certain type of text, like the path I posted above. If I copy that path, paste it into a text editor, and then copy it from the text editor, then it will let me paste it. I tried this in every browser, and they all had the same problem.

 

.

Link to comment
Share on other sites

  • 2 weeks later...

I made some good progress on it, here is the result:

See the Pen pRmNVd?editors=1010 by ajhalls (@ajhalls) on CodePen

 

A couple things I noticed. I haven't ever used paper.js, so I am not sure why it is behaving this way but you have to click the "Reload" button AFTER the panel is visible. For some reason the code refuses to create the instance without it being visible. I got around it by using a timeout to delay it, but I thought I would leave the bug there in case someone knows what I was doing wrong.

$("body").on('click', ".easingEditorTab", function() {
    setTimeout(function() {
       RebuildEditor();
    }, 300);
});

Other than that, I noticed the same thing OSUBlake did which is that the regular easing values from the customStrings data here:

See the Pen JRyNQg by GreenSock (@GreenSock) on CodePen

doesn't work, but the data from the bottom of the window does. To demonstrate I put in a saved option called "Saved Spring" which you can load from the menu, all others fail to load. Of course I could recreate all the normal easing curves, but it might be worth figuring out why the two aren't compatible with each other - and yet both work when passed as variables into TweenMax.

Link to comment
Share on other sites

I didn't have time to look into that setTimeout() thing, but I can speak to the easing stuff - the string you pass to CustomEase can only contain cubic bezier data ("C", "c", "M", "s", "S" or "L" commands). To accommodate the other commands, it'd almost double the file size of CustomEase, so it didn't seem worthwhile especially since we provide the Ease Visualizer tool that converts anything into the standard format. In other words, you can just run your string through the Ease Visualizer to have it spit back the parsed version that's cleaned up. Keeps file size tight. Does that answer your question? 

Link to comment
Share on other sites

Yeah, I'm not sure why you have to reload paper. My guess is that paper needs to know where the canvas element is to detect touch/click events and it's size, and showing it doesn't automatically recalculate itself, so it has to wait till the next frame or so to recalculate everything. 

Link to comment
Share on other sites

  • 1 year later...
On 30.1.2017 at 12:50 PM, OSUblake said:

I made a couple proofs of concept using paper.js. Note that those demos are not using the actual CustomEase as they were made before it was released.

See the Pen b7f5c5b3456eef085930d08d91b1cb1c?editors=0010 by osublake (@osublake) on CodePen

.

 

Hi @OSUblake,

 

 

I'm just wondering if I can use your "Custom Ease Test" codepen as the basis for an ease visualizer in anivendo  https://www.anivendo.com

 

Are you okay with that? :-D

 

Cheers Oliver

 

Link to comment
Share on other sites

On 26.1.2017 at 7:42 PM, GreenSock said:

That's not something we currently offer, but we'll definitely consider it for the future. If anything, it'd probably be in the download zip for account holders (since CustomEase is only available to account holders). 

 

Is the greensock.com/ease-visualizer page not loading well for you? Is that the main reason for your request? 

@GreenSock Hi Jack,

is it allowed to make use of custom ease in my Application anivendo?

https://www.anivendo.com

 

 Cheers Oliver

Link to comment
Share on other sites

1 hour ago, anivendo said:

Hi Jack,

is it allowed to make use of custom ease in my Application anivendo?

 

Do you mean the CustomEase class itself or the Ease Visualizer (very different things)? I assume you meant the CustomEase class. In order to use that in something for which you're charging multiple customers for, you'd need a "Business Green" license. But yes, with that it's totally fine and is allowed per that license. Enjoy!

 

(If you meant the Ease Visualizer, then our answer is the same as was mentioned earlier in this thread - it's not something we're prepared to offer or support for 3rd party use - please just link folks to our site for that)

Link to comment
Share on other sites

1 minute ago, GreenSock said:

 

Do you mean the CustomEase class itself or the Ease Visualizer (very different things)? I assume you meant the CustomEase class. In order to use that in something for which you're charging multiple customers for, you'd need a "Business Green" license. But yes, with that it's totally fine and is allowed per that license. Enjoy!

 

(If you meant the Ease Visualizer, then our answer is the same as was mentioned earlier in this thread - it's not something we're prepared to offer or support for 3rd party use - please just link folks to our site for that)

Thank's Jack...Perfect, I meant the class :-D And - of course - I will upgrade license before charging anything 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 30.1.2017 at 12:50 PM, OSUblake said:

Hi @ajhalls,

 

For ideas on how you could create your own visualizer, check out this thread. I posted a bunch of different ways to create and manipulate paths.

https://greensock.com/forums/topic/14810-easing-feature-request/

 

I made a couple proofs of concept using paper.js. Note that those demos are not using the actual CustomEase as they were made before it was released.

See the Pen b7f5c5b3456eef085930d08d91b1cb1c?editors=0010 by osublake (@osublake) on CodePen

 

But you could do something similar to what I did as far as making editable paths. On every path object in paper.js is a pathData property, which you could plug into CustomEase and it should be able to convert it into an ease.

 

.

@OSUblake Unfortunately I got a little bit stuck on paper.js as it comes to store a complete path (curves, segments and handles) to localStorage and add it later to a new Path. Do you have an idea on how to achieve this? 

 

NEVERMIND, I figured it out!!!

Edited by anivendo
SOLVED
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...