HTML5 animation tool powered by GreenSock

[erik]

Hello everyone,

 

I've just released a new HTML5 animation tool that uses GreenSock JS as the engine. It's obviously an early version and there is room for a lot of improvement and many more features. But at this stage I'd really love to get some feedback from the GreenSock community.

 

The tool gives you the source so you can build on whatever base you've created in it.

 

You can check it out at http://tweenui.com

 

So what do you think?

[GreenSock]

Thanks for sharing this, Erik, and for inviting feedback. Looks like a tool with a lot of potential.

 

To everyone else: I sent some feedback of my own to Erik privately (before this topic was posted) but I'd invite others to chime in here.

[Michael71]

Very impressive, I'm mostly interested for the timeline element what did you use to make it, any library that you linked with greensock? If you don't mind sharing.

 

Thanks in advance!

[jamiejefferson]

Hmm would also like to know if this is actually 'HTML5' (i.e. it doesn't have the same feature set in non-HTML5 browsers since it uses more than just CSS3 styles). Since greensock seems to work perfectly in HTML4, if you could support that I'm sure some users would be thankful.

[erik]

jamiejefferson, since TweenUI uses GSAP as the engine, all critical effects (including motion and opacity) should be supported in virtually all browsers.

 

Michael71, the site is built using Google Web Toolkit and a library called gwt-dnd to handle some of the drag and drop. And of course, GSAP is used too

[erik]

Hey everyone. I made a short video that showcases the basics of the tool. Check it out here

[erik]

Great to hear NandiTo! You've just made my weekend even better. :-P

Be certain that it will keep improving, I'm working on it continuously. And I'd really love to hear what features you're missing the most!

[Monnone]

Very cool work. I see you're using Canvas, which is nice (I think...I'm just starting to dive into animations/interactivity beyond AS3).

 

Have you considered making the scripts in the HTML file separate JS/CSS files? Seems like that would be one less step in helping inject "HTML5" elements into sites already in a CMS.

[erik]

Hi Monnone, I'm glad you like it! It's not using the canvas element though. What fooled you was probably that the main div has the id "canvas".

 

Regarding putting the output scripts in separate files — I think that's a good idea. That would certainly make it easier to add the the animation into an existing page. I'm also working on a hosted version where you just need to add a few lines of javascript to include your animation.

[erik]

Hey everyone.

 

I've recently pushed some updates to TweenUI. The most exciting new feature is that you can now publish animations directly to the web and embed them anywhere using a few lines of javascript. That also means you can update your animation in real-time, anytime. I've also added the ability to add a click-through link to an animation. Other news include the scale effect and numerous bug fixes.

 

Edit (basic features still free): I've also launched a paid plan to be able to continue improving the product. I'm working on getting a free trial out there, but until that's in place, I'd be happy to hook you up with a 1 month premium account. Just register and send me an email with your username!

[Leo Alex]

Hello,

I got an issue regarding about Tweenuii, It is cool using this animator, it made my work much easier because It is in responsive mode already. We tried its responsiveness in Desktop computer browsers (e.g. Chrome, Mozilla Firefox and Safari) but when we tried it in iPhone and iPad, it loses it's responsiveness, It doesn't adapt to iPhone's and iPad's screen sizes. Is there any way that I can fix it? or does any one have the same issue? 

[GreenSock]

Have you checked with the TweenUI author directly? We didn't create TweenUI, nor do we support it here, but if you have a GSAP-specific question we'd be happy to help.