JD9

@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

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!

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 ); 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

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