Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
EugeneA

GSAP+ SVG Authoring tool - Looking for beta testers and feedback

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

Hi, 


I’m working on general purpose GSAP+SVG  visual authoring tool. 
I just published very first beta and I need feedback from GSAP community. 
This is the very early beta – not polished and have only small fraction of planned features.


My main questions are:
1)    Do you need tool like this?
2)    Is user interface convenient? What should be changed in UI?
3)    What are the most important missing features?

 

You can download beta from project web site at:   https://aphalina.com


First version is Windows only.

 

I will really appreciate any feedback,

Evgeny
 

  • Like 2
Link to comment
Share on other sites

@EugeneA I gave it a try for 5-10 minutes, my quick feedback is

 

1. It seems like a useful tool with plenty of options to work with, though yet to try everything.

2. User interface while interacting with objects is sort of unnatural with colorful handles. I think people will find it more useful if you use icons showing what each handle does.

3. If transform origin is changed, the resize handles start behaving unnaturally, which is hard part to work around but anybody using visual tool will expect it to work like adobe resize handles work.

4. Overall the interface seems like simple and user friendly.

5. Isn't there option to export mp4 instead of avi?

 

@cartimundi Just saw your question, this tool exports animation as gif or video, might be what you are looking for.

  • Like 1
Link to comment
Share on other sites

 

@cartimundi, thank you for feedback.


 

Quote

 

3. If transform origin is changed, the resize handles start behaving unnaturally, which is hard part to work around but anybody using visual tool will expect it to work like adobe resize handles work.


 

 

I'm trying to make it obvious when you change only "Scale" component. Probably I should implement standard scaling and provide some way to use this method for "expert" users (with Shift-pressed for example)

 

Quote

5. Isn't there option to export mp4 instead of avi?

 

To be honest I'm focused on quality of html5\svg export for the first release. For now I have only simplest avi implementation with minimum compression so you need re-compress result before publish. I will add more robust video export in the future releases.

 

 

 

 

 

Link to comment
Share on other sites

Very nice GUI, I feel the quality!

But I have to contradict You in one part of this sentence "Animation should be drawn, not coded!"

HTML and SVG should be drawn and generated, but GSAP script should be written by pure hand IMHO.

 

It is the sweet, fun part of banner making. Furthermore the demand for additional custom .js code is alway popping up.

 

Regards

 

 

  • Like 1
Link to comment
Share on other sites

@Oliver16Years, thank you for feedback.

 

Quote

HTML and SVG should be drawn and generated, but GSAP script should be written by pure hand IMHO.

 

Could you explain this in more details?

I'm agree that there are lot of situations where manual coding is much better option, but I think there are also many cases when you can generate most of js and use hand-coded scripts only when you need some custom logic.

 

Of course I plan to add "custom script" section that will allow to inject custom code in results.

Also I'm trying to make generated results looks like it was coded by hand so it will be possible to create "draft" visually and than polish in script editor.

 

 

 

Link to comment
Share on other sites

When You make one animation the GUI approach can be as good as the scripted. But if You have to make dozens of size mutations from a master animation, the time spent on adjusting the start and end positions of the graphical elements can be huge. GreenSock script is fast and easy to write with dot chaining, I love to do it when I am finished exporting the assets and generated the HTML for them. When the client accepted the master animo, all i have to do is to make the different sizes, adjust the elements. The script can be left untouched most of the time.

I agree with You in that the HTML and SVG even though is human readable, aren't meant to be human written.
I hate the syntax of them, especially the SVG one, even more when it is combined with horrific CSS. This is why I spent months on writing my own HTML and SVG generator :) I don't want to see HTML or SVG code just the good little .js.

Looking forward to try out Your tool.

 

  • Like 1
Link to comment
Share on other sites

I like the idea, very ambitious :) I'm on a Mac so can't test but would love to.

My only quip with apps like this is file handoff, it'll require the next person to know how to understand the app in order to modify it. The difference between this and another app such as Animate CC from a user standpoint is that Animate CC already has a massive community of ex-Flashers that already know the app. Yeah, I know it's spits out clean code that "can" be edited but that wasn't the original format in was authored in (I'm assuming there's some sort of authoring file that this app works off of and it generates a different file -- but I could totally be wrong since I wasn't able to test it). This, unfortunately, is what I think what would stop something like this from catching on from the dev community.

What I think this would be a good component for, is creating modular blocks of code for GSAP hand-coders, or for when it's too much of a pain to try and hand-code something (i.e. character animation). Perhaps it can generate a block of code with a GSAP timeline that can be inserted into an existing GSAP timeline, or have an option to, some sort of process that makes that portion simpler. A way for non-coders to work with folks who code as well. More of a "component helper" to GSAP coders, rather than a full-on hand-coding animation replacement.

Perhaps it's a tool similar to Lottie/Bodymovin where it solves a specific niche.

Or, I believe you can include CSS/JS inside of the SVG format, maybe this app could include everything, including animation, in a self-encapsulated SVG file (I believe I was reading a thread or post somewhere from Chris Gannon (that super-talented SVG animator) who was trying something like this out. Oh yeah, found that link.

"Stop the madness!"-- lol.

 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I proud to announce that I finally published first release.

Many thanks to all of you who send me feedback!

 

@davi

 

Thank you for detailed feedback,

 

Unfortunately current release is Windows only but I plan to add Mac edition in the future.

 

Yes, app have it's own file format but the exported document is single html file with embedded js\svg\images. The only external dependence is GSAP library.

I don't see any benefits in placing everything in single svg instead of  single html and I'm afraid it can cause browser compatibility issues.

 

Unlike bodymovin\Animate CC I''m trying to make result jscript easily readable\editable so I think it's possible to add some "snippet generation" workflow in the future.

 

@Oliver16Years

 

I spent some time trying same animations in code and in visual editor and I have to agree with You that if you work on complex animation and you know your animation library very good things can be faster with manual coding. I must admit that first version of my tool is mainly for people who can't code or don't want to learn GSAP syntax. 

 

But in general I still believe that one can be very productive using sophisticated visual tool. I hope I will be able to prove this with future releases of my app.

 

 

 

 

 

  • Like 4
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.
×