Jump to content
Search Community

GSAP IDE for animating DOM & SVG

JD9 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

Hi everyone! I'm Jos from the The Netherlands, entrepreneur and full-stack developer (web design, illustration design, motion graphics / animation, front-end development, back-end development). I've been following Greensock / GSAP occasionally in the past 12 months, but I haven't began actively animating using GSAP until recently. So here I am!
 
The last few weeks I've spent quite some time researching which development workflow / stack / IDE / platform best suits my needs for animating the DOM & SVG, yet unfortunately I haven't found a proper solution. Can you help me find one?

What I do know is the following, I want to keep using:

  • my Adobe Creative Cloud subscription: Photoshop for bitmap design/editing, Illustrator for vector / SVG design, After Effects for motion graphics video (or for DOM/SVG animation would that be possible, I like AE's IDE), and maybe Adobe Animate CC (yet there doesn't seem to be a way I'm aware of for animating the DOM, only HTML Canvas, feel free to correct me if I'm wrong). Bye Adobe Edge Animate, you seemed to be a promising platform to me, but alas ...
  • CSS for DOM-styling and simple CSS Transitions (simple hover effects on hyperlinks, buttons etc.);
  • jQuery, (primarily) as selector engine and client-side form validator;
  • GSAP for DOM & SVG animation. GSAP absolutely rocks! Although I'm primarily developing on an iMac5k now, I used to primarily work on a 2011 model MacBook Pro + Thunderbolt Display, and GSAP is and was the only animation software environment that didn't trigger the MBP's ventilator to behave like an aeroplane taking off! :-P :-P :-P

Coding in GSAP using TweenMax / TimelineMax suits me fine for "relatively simple" animations; I'm not a GSAP-expert yet but as I gain experience I'll be fine coding the simple stuff I guess.

However... wouldn't it be nice to be able to use GSAP in a proper IDE that looks like Adobe After Effects CC / Animate CC? With a proper multilevel visual timeline, property boxes, designer tools AND code development tools all integrated in one IDE!

Also, looking at current SVG animation projects "out there in the wild" (by all animators worldwide I mean, not just myself), I've noticed almost every DOM- / SVG- / web animation lacks "object / path deforming". Compared to Adobe After Effects for video motion graphics, where path deforming of a character for example can be done using AE's "puppet tools", DOM- / SVG- animation for the web has a long way to go, I reckon!

Yet, (although I haven't used it yet) MorphSVGPlugin seems to be suitable to some extent for path deforming, but it's hardly doable to switch over back-and-forth between GSAP and Adobe Illustrator for every little object/path addition to the SVGs. Scene staging is very hard as well using just GSAP coding.

 

What are your insights on this matter? Are there proper IDEs out there I've missed? Can I indeed use Adobe Animate CC / After Effects CC running "embedded GSAP"? Is GreenSock developing their own DOM/SVG animation IDE?

Thanks for your reply in advance.
-Jos

  • Like 2
Link to comment
Share on other sites

Hello JD9, and Welcome to the GreenSock Forum!

 

I am not near my computer right now, But here are a couple visual editors that use GSAP as their animation platform:

 

AniMachine:

https://github.com/animachine/animachine

http://animachine.github.io/animachine/#/demo/Box?_k=4326h8

 

TweenUI:

http://tweenui.com/animator/

 

HTML5 Maker:

http://html5maker.com/

 

:)

  • Like 3
Link to comment
Share on other sites

Hi Jos,

 

Welcome!

 

You make a lot of great points and I would guess a large percentage of the developer / animator world has similar experiences, needs and frustrations.

 

I'll try to address a few points quickly.

 

Yes, Adobe left a huge void when it ditched Edge Animate. They no longer have an IDE for DOM animation.

They seem to be "all in" on Animate CC and yet allowing only for canvas output is a bit limiting.

 

The other "big" player is Google Web Designer but I don't seem to hear a lot of excitement around it. However I may not be listening to the right people. I would suggest taking a peak at Tumult Hype Pro. I haven't used it yet but have heard that it is a fantastic layout tool for DOM and it plays nicely with GSAP:

 

http://tumult.com/hype/pro/

http://forums.tumult.com/t/web-banners-hype-and-greensock/6093/3

 

 

Back to Animate CC, CJ Gammon has an Animate add-on that supports exporting Animate content as animated SVG: http://cjgammon.github.io/SnapSVG-Animator/ It looks very promising if you want a contained SVG workflow. Last I heard there wasn't any way to add scripting to allow for an engine like GSAP to animate the SVG bits that get exported but it was perhaps being worked on. Could be very cool if that happens.

 

Yes, MorphSVG is best-in-class for scripted path morphing but as you noted it only works on 1 path to another path. Chris Gannon  http://codepen.io/collection/neJjvB/ and DIaco http://codepen.io/collection/Arxekv/ have made some wonderful things. But like you noted if you want to morph an entire scene with a wave effect (like you could do in AE) it really isn't designed to do that. 

 

I use Illustrator for exporting SVGs to be animated with GSAP. The workflow is poor and a bit quirky. My guess is that Adobe is best positioned to make a tool that allows for SVG design and animation in one, but it would be great if that environment also supported working with other DOM elements and wasn't limited to just canvas output or just SVG output. 

 

I appreciate your interest and the time you took to share your thoughts. I wish I had better news about the killer GSAP-exporting IDE for DOM / SVG animation but it for now there is a bit of a void. 

  • Like 5
Link to comment
Share on other sites

Hi Jos :)

 

Welcome to the forums.

 

In addition to Carl’s great thoughts, I’ll throw my two cents worth out there for you.

 

I came into the GSAP world from After Effects too so I can appreciate your desire for that type of workflow for DOM/SVG animation. You’re right though, there is a long way to go before that happens. My personal opinion is that might be a good thing for now. When something becomes so simple to create, a hive mind soon follows and a world of sameness is born. Take WordPress for example. Even though you can design amazing websites using WP, what do you see the majority of the time? The same few themes over and over. Ever seen an agency website with a giant hero image and large letters that say something like “We’re creative and different”?

 

If Adobe invented a new tool tomorrow that was identical to the AE workflow but animated SVG and DOM elements, inevitably you’d see several templates made available. Pretty soon the top templates would be used on thousands of websites and we’d all see nearly the exact same animation everywhere. I don’t object to tools that can make our jobs easier, but rather the lack of creativity that will surely follow. That’s just my opinion though – YMMV.  ;-)

 

I’m with Carl on the clumsiness of using AI and exporting SVG. That really needs to be improved, but with Adobe and their lack of any real competition, who knows when we’ll see much change. That being said, I have gotten quite used to the ‘Export Selection’ feature when jumping between my code editor and AI during the SVG animation process. I do wish it was one click instead of three to grab said code, but it’s o.k. for now.

 

morphSVG is path to path, but there are ways of automating it. If you name your start and end paths accordingly you can loop through an entire group of paths and make the morphs happen. This is a CodePen I made for another forum question, but it shows you the basics of what could be done.

 

See the Pen LNLpgB by PointC (@PointC) on CodePen


 

o.k. – there’s my two cents worth for you. 

 

Best of luck to you. Happy tweening and welcome aboard.

:)
  • Like 4
Link to comment
Share on other sites

Hi y'all, thanks for the warm welcome!

 

I've given some thought on your comments:

 

@PointC:
- You said: "I don’t object to tools that can make our jobs easier, but rather the lack of creativity that will surely follow." Correlation is not causation: if easier tools exist, the masses can use those tools, yet the masses lack creativity regardless of the toolset. Yet sticking to "code-only" holds back creative animators that just can't code!

 

@Jonathan:
- http://tweenui.com/animator/ seems to work to some degree. The GUI however seriously lacks functionality: only a few properties can be manipulated (opacity, scale, x, y, rotation, several font properties such as font-family, font-size, font-style, font-weight and color), no easing options, only 2 keyframes per "timeline track" (which can be overcome by adding additional tracks for the same tween type, e.g. opacity), no option to select keyframes for exact positioning, just a tiny amount of DOM element options (text, image, rectangle, which is a div I suppose?). It's primarily aimed at banner animation in stead of web / web app design.
The working functionality as-is is okay for what it's intended for, but not an option for me in its current format.

- AniMachine: very promising approach! But the core developer ("azazdeaz") states on GitHub that he's currently stuck with performance issues and thinking about porting to Elm. I understand his concerns: his code bloats the DOM with data-attributes and inline css, the GUI is buggy (I can hardly move the timeline playhead for example), but he's got the GUI approach spot-on (Adobe After Effects-like). Latest commit 18 days ago, 5 contributors: this guy needs help!
 

@Carl:

- adding multiple "flat" SVG "states" into one and morphing them from one state to another IS very clumsy indeed.

By "path deforming" I mean for example this (to my perception, THIS is how path deforming should be done):
1) think of an svg path starting off as a rectangle / box;
2a) later on visually (!) add an anchor point to the "bottom line" 20px from the left;
2b) at the same time at each corner add 2 anchor points around the corner 5px and bezier curve it (ehm, or in simpler terms: give all corners a borderRadius of 5px  :-P );
3) then move that anchor at the "bottom line" downwards by 30px and leftwardst by 5px

=> we've created a tween from "box" to speech bubble!

- Tumult Hype: I've noticed this product myself before but I haven't given it a spin yet. Maybe I should though, it seems to be the most promising visual solution on the market currently! But reviewing this (http://forums.tumult.com/t/tried-pivot-animation-with-svg-in-hype/3339) regarding (please watch it!) this (http://www.luckyde.com/ipad/turn/turn.html), the animator ("Luckyde", I think this user is also @greensock.com) states:
"Items jitter a lot, i notice this a lot with Hype for small objects, they'll try to snap to positions the more subtle the animation, thats why i use GSAP over top of Hype for precise animation, it doesn't have this problem, i just with i could do it without it and just with timeline."
 

"with" is a typo, he means "wish". He wishes he could use Hype's timelines and properties within the GUI without coding as GSAP-native.
Hype has the GUI, GSAP has the performance, I think you should be best friends! ;-) Why not integrate GSAP into Hype Tumult's GUI by default, natively?

 

-Jos

Link to comment
Share on other sites

Just a few other thoughts on a "GSAP IDE / GUI":

- Looking at Tumult Hype, a "project" starts off with nothing, the animator adds components, adds animation, then exports, a coder tweaks the exports (I've noticed on some YouTube videos Tumult Hype exports inline CSS per DOM element on the export, bloating the DOM, so those CSS properties should be moved to external CSS files for clean, barebones, HTML), and the animation is then embedded to an existing web page.
What if later on the website client decides to expand / alter the animation on the web page? You need to start all over again from an existing Tumult Hype project, alter the animation, and then re-optimize the animation for use within the web page.

Far better workflow: the workflow should support animation editing the other way around:
1) start off with an existing web page (HTML, CSS, Javascript as-is) with or without animation in it;
2) import that web page into the "GSAP Animation IDE", and view the web page just like a normal browser;
3) edit the animation within the GSAP Animation IDE, don't code the animation by default, yet Tween it visually "the After Effects way";
4) simply save it.

- Because of this import-edit-export functionality, shouldn't development of a proper GSAP IDE begin with Chromium? Just like Atom.io does? (http://blog.atom.io/2014/02/26/the-nucleus-of-atom.html)

- Currently a GSAP Timeline is actually a series of Tweens, where each Tween (or "Timeline Action") within the Timeline is able to target one selector (I know about an array of selectors, but let's bypass that option for now). Yet the current GSAP Timeline itself is this way able to target multiple selectors within one Timeline. That's not how the "After Effects" approach functions: each Timeline targets ONE element, and each Timeline track consists of multiple Timeline Tracks each targeting one property.
From a coding stance, it's logical to be able to animate multiple elements from within one GSAP Timeline, but from a visual / GUI stance it's not.

- DOM classes are a problem from the approach in the previous point, which can be solved by adding a DOM listener to the IDE/GUI. => In case a DOM class is the selector, ONLY VISUALLY auto-add Timelines / Timeline Tracks to all elements containing that class.

 

- DOM class manipulation is a problem as well! What if some Javascript listener alters (add, remove) classes to an element? How should the GSAP IDE/GUI treat those in case some class contains animation?

 

- the GSAP API currently has Tweens and Timelines, how about adding Scenes?

- how about adding pre-fab as well as hand-written functions as "Symbols" to the GSAP IDE/GUI? By adding community- & cloud based "Symbol Snippets" into the GUI, an App Store for GSAP Snippets / Symbols?

 

I'm on a roll now! :P

Link to comment
Share on other sites

@Jack and @Carl, yesterday I've PM'd you (through the contact form, I haven't noticed another PM option).
Looking at licensing / business models, I've read your stance about them (http://greensock.com/why-license) and I understand that perfectly.
 

But how about adopting an Adobe CC licensing business model to a homegrown - to be developed - GSAP IDE? Wouldn't that suit far more animators and yourself alike? GSAP for coders free, or freemium, and GSAP IDE for "visual animators" as a subscription licensing model?

Before Adobe Creative Cloud, one user license for a certain Adobe version costed about EUR 3.000,- one-off down payment, without version upgrades. The monthly subscription fee for Adobe CC is about EUR 50,- per month, hence EUR 600,- per year, including version upgrades. That accumulates to roughly 5 years of included upgrades without a lump-sum down payment. So while hordes of Adobe users were (initially) "whining about" the high costs, to me the Adobe CC business model is a good deal because the Adobe CC license model does include version upgrades plus a whole bunch of extra added features (Typekit, a few free high-quality stock photos et cetera, et cetera). Although I don't (or rarely) use all those added features, it probably is an appealing offer to a lot of people.

I for one would be happy to subscribe to such a business license when GreenSock would deploy a kick-ass GSAP IDE!
A whole world of community-generated "Animation Symbol Snippets" could additionally come into play, giving GSAP power users / animators an additional income market as well.

How does this all sound? Viable? Or am I going to fast? ;-)

-Jos
 

Link to comment
Share on other sites

PS1: sorry for the tiny visual, you can click on it to zoom in though ;-)
PS2: I think this would require every anchor / coordinate in an SVG to have an ID, and I'm not sure if that's possible in current SVGs.
What do you guys think?

-Jos

Link to comment
Share on other sites

PS3: if adding IDs to SVG anchors / coordinates isn't possible in the SVG spec, you could also read all initial coordinates from the SVG path, explode them into a temporary array / JSON object, add / remove anchors as needed in the array / object, change coordinate values per array / object element, update the initial SVG path, and then morph them! ;-)

 

-Jos

Link to comment
Share on other sites

Thanks for all the thoughtful suggestions. 

Definitely a lot to absorb and I'm doubtful I can keep up with responding to each point.

I'm sure a lot of us would enjoy talking for hours about what would make the best animation IDE, its just a little difficult to type it all. 

 

We definitely agree that the world needs a solid GUI for generating GSAP animations.

 

Ultimately it comes down to "who is going to build this?". We are not a traditional software company and building and supporting a full-fledged IDE requires teams of people. 

 

To address a few of your technical points:

 

- Currently a GSAP Timeline is actually a series of Tweens, where each Tween (or "Timeline Action") within the Timeline is able to target one selector (I know about an array of selectors, but let's bypass that option for now). Yet the current GSAP Timeline itself is this way able to target multiple selectors within one Timeline. That's not how the "After Effects" approach functions: each Timeline targets ONE element, and each Timeline track consists of multiple Timeline Tracks each targeting one property.
From a coding stance, it's logical to be able to animate multiple elements from within one GSAP Timeline, but from a visual / GUI stance it's not.

 

 

I think I see what you are saying here, but it really doesn't matter how the user interacts with the program to animate individual properties of objects with different eases and such. Ultimately the program just has to spit out a single tween for each animation and put it into a TimelineMax with the proper start time. 

 

- the GSAP API currently has Tweens and Timelines, how about adding Scenes?

 

 

I'm not so sure I understand this. Being that you can nest timelines in timelines I don't think there is a need for another level of hierarchy.

 

- how about adding pre-fab as well as hand-written functions as "Symbols" to the GSAP IDE/GUI? By adding community- & cloud based "Symbol Snippets" into the GUI, an App Store for GSAP Snippets / Symbols?

 

 

yes, having an effects / component system would be lovely.

 

 

Thanks so much for the all the ideas and enthusiasm. I wish more people had this passion. I really enjoy soaking it all in, its just a lot to address at the moment. 

  • Like 2
Link to comment
Share on other sites

Thanks so much for the all the ideas and enthusiasm. I wish more people had this passion. I really enjoy soaking it all in, its just a lot to address at the moment.

You're welcome Carl and I understand your time constraints.

-Jos

Link to comment
Share on other sites

You’ve obviously put a lot of thought into it and have a good understanding of some of the challenges animators face today. 


 


I think an IDE/GUI for building GSAP-based animations is an excellent idea…but there are several concerns that make it a less-than-ideal project for us to tackle: 


 


  1. We’re very focused on the runtime/scripted engine. Attempting to build a full-fledged GUI is a massive undertaking (well, to do it “right”, the way we’d want it done). We simply don’t have the resources.
  2. Building a tool like that takes a very particular skill set. We’ve seen many companies attempt animation GUIs and most have failed. You need an excellent sense of UI design. When a GUI is built by a code-focused developer, it’s very easy to tell. It typically has lots of nifty little nuggets packed into a super crowded UI that nobody (except the author) would ever want to (or know how to) use. Their intentions are always excellent…but UI design is an art form that precious few have. Currently, we’re code-focused and prefer it that way.

  3. We don’t want to limit GSAP’s appeal in the wider market by making it seem tethered to our own GUI. The way things are now, many different GUI makers could leverage GSAP. Some have approached us about doing that at some point. We think it’s smarter to leverage their experience with building GUIs, their existing customer base that may already be comfortable with their product, and employ our pervasive technology under the hood for maximum performance, compatibility, and reach (especially on ad networks where GSAP’s file size is exempt). 

 


I totally appreciate the suggestions and the passion with which you’ve offered them. Love it! And we resonate with the desire to see an awesome GSAP-based GUI that also allows hardcore coders to work their magic. That’d be amazing. We’ll continue looking for opportunities to help other teams who want to make that dream a reality. 


 


Don’t hesitate to offer more suggestions. We’re always looking to improve. 


 


Oh, and regarding the path deforming, you should be able to accomplish that sort of thing by placing those extra anchors strategically in your SVG. Building an API that allows per-point animating without becoming overly complex/intimidating/bloated is definitely a challenge. Very few people seem to have the need for this sort of thing anyway, especially given all the work we did on the internals of MorphSVGPlugin to "automagically" find the optimal way to morph between 2 shapes. Usually it "just works" and you don't have to do all the extra work with the other points or defining a shapeIndex, etc. And trust me - there's a lot of logic packed in there to figure it all out :) 


  • Like 2
Link to comment
Share on other sites

Hi Jack, thanks for the reply.

 

- my path deforming proposal: only useful in a GUI context, never mind.

- development of GSAP IDE/GUI: as suggested, this could be a separate product from the API, so it wouldn't (necessarily) interfere with your GSAP API (product) strategy. I don't see how such an IDE could limit GSAP’s API appeal in the wider market, the GSAP API would still allow to be used in other IDEs/GUIs or code animation project. ( Google Search managed to survive quite okay after Chrome Browser initially deployed, right? )

I completely respect your considerations on not having the resources or UI design skillset. Of course those aspects could very well interfere with your API strategy.

 

Being new to the GreenSock forum I was simply unaware of any skillset or resource restrictions and I apologize for that!

-Jos

Link to comment
Share on other sites

Some quick notes on TweenUI. You actually can edit easing and exact start/stop times for animations by double clicking the animation bar. As for adding and animating more styles, we're aware and working on this. I think Jack hits the nail on the head with the challenge for building a GUI on top of GSAP – ideally you would want to be able to do everything you can do with code - and more - while still keeping it easy and intuitive to use.

 

You're right that we're focusing more on banner animation at the moment, and so perhaps some of the features you want to see in a GUI is not right for us. But even so, the feedback is very much appreciated. I'd love to hear more comments and suggestions for improvements.

Link to comment
Share on other sites

@erik, a couple of remarks/suggestions on TweenUI:

 

- easing options, start, duration by double clicking: Aaah! Now that you mention it, I remember accidentally noticing those options while figuring out your GUI at the beginning but somehow forgot how I got there and "mindmapping" that option as available on AniMachine (which I also reviewed briefly) instead of TweenUI: my bad!

 

- keyframes (#1): being familiar with Adobe After Effect's interface, I'd suggest adding a feature being able to click on a keyframe and from there viewing the exact same dialogue box as from doubleclicking the animation bar;

- keyframes (#2): option to add more than two keyframes of the same property on one timeline track. This way you can reduce the number of "timeline tracks" for more complex animations;

- keep separate "timeline tracks" per property (like you have now for "motion", "opacity", "scale", and "rotation") but make the properties panel

<div class="JM">...</div>

contextual to the property you're animating.

 

- add more properties.

PS: I didn't mean to ridicule TweenUI by any means in my short review (#entry61022)!  It's actually the completest and most performant browser-based animation GUI I'm aware of, so big props to you! I'm happy to give you more suggestions if appreciated.

-Jos

Link to comment
Share on other sites

I think there is a huge disconnect between web developers and game developers. Game developers know every trick in the book, but keep to themselves. Web developers are just ignorant of the stuff game developers have come up with. Search around for game dev tools. A lot of them incorporate GSAP. Most of what you're asking for, like deformations, can already be done with a sprite based tool called Spine.

http://esotericsoftware.com/spine-in-depth

 

There's also a lot of animations that can only be done with sprites, like this one. Pull the candy apart!!!

http://www.goodboydigital.com/pixijs/cracker/

 

 

PS3: if adding IDs to SVG anchors / coordinates isn't possible in the SVG spec, you could also read all initial coordinates from the SVG path, explode them into a temporary array / JSON object, add / remove anchors as needed in the array / object, change coordinate values per array / object element, update the initial SVG path, and then morph them! ;-)

 

-Jos

 

Easier said than done. You would have to manage each point, so you might start running into memory problems. On top of that, the number of points in each path must be the same, which would make dynamic morphing animations nearly impossible. I've done something similar. I can run multiple morphs on the same element with my own custom solution, but every path must have same number of points mapped in certain order before animating.

 

Here's a simple demo of that. Just keep clicking to add a new path. Each set of dots is a new path being added to the current path.

See the Pen 7b033317eed404ce7ab42508f61da856 by osublake (@osublake) on CodePen

 

The combined effect could look like this, although this isn't my work, just where I got the idea from. Click really fast.

See the Pen KdrWKN by kvndy (@kvndy) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Allthough this is quite a late reaction to this thread, after reading all comments i notice one solution missing.

 

Using the 'BodyMovin' plugin with Gsap or Lottie to get any (most) AfterEffects animations straight out. It converts the animations to Json and from that you can build in any tool needed. Doing that at the moment with a combo of AfterEffects, BodyMovin, GSAP to create customizable characteranimations for the web.

 

@JD9 im Dutch too, moving to Valkenswaard soon ;-)

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...