akbr

You guys rock. Lightbulbs going off over here! I didn't appreciate that TweenMax would sense and use getter/setter functions. That solves a ton. In light of that, I'll probably hold off on layer-specific timelines for the moment, but I'm inspired by the concision. I'll make a point to swap out Scroller for the ThrowPropsPlugin soon, if only so I have an excuse to join the Club. Thanks again.

Thanks, Carl -- that's helpful. I expect that a quick loop through the active tweens (to build a "layer redraw list") is the easiest approach at this juncture. (Though I've bookmarked the KineticJS plug-in for future reference!)

First off, I'm a big fan of GSAP. Great work! I have a question about "grouping" transitory tweens. I'm developing a Google Maps-like experience using multiple canvas elements. I'm using TweenMax to periodically change the state of sprites on the screen. My abstractions are similar to those of KineticJS: a "Map" class owns "Layer" classes (which have associated canvas elements) which own "Sprite" classes. The top-level Map class uses the TweenMax ticker, triggering redraws of child Layers when necessary. One condition for triggering redraws is the presence of active tweens. var thereAreActiveTweens = TweenMax.getAllTweens().length > 0; if (thereAreActiveTweens) { // redraw all layers } else if ( /** other conditions **/) ... This works, but it's inefficient: I could end up redrawing multiple canvases for the sake of one active tween on one layer. I'm looking for functionality like this: Map("A new frame! Do my layers need to redraw?") Layer 1 ("I have no active tweens! Skip me.") [return;] Layer 2 ("I have active tweens! Redrawing...") [do redraw; return;] etc. In other words, I'd like to arbitrarily associate tweens with different "groups" under a single instance of TweenMax. Something in the spirit of TweenMax.getActiveTweensFor("backgroundLayer"); I think what I want is very close to a Timeline* instance for every layer, except that I'm only interested in active tweens. (And, in fact, I want old tweens garbage collected!) Any guidance? Cheers!

Thanks for the response. It's probably true that complex SVG animation is a small niche served primarily by Raphael at present. That said, in case it's helpful to someone down the road, here's a link to my hackjob of your RaphaelPlugin: https://github.com/akbr/GSAPSvgPlugin/blob/master/SvgPlugin.js My changes were trivial; mostly swapping out Raphael-specific matrix fetches and BBox calls with the native SVG versions. I used D3 as a selector here, but it could just as easily be jQuery or the DOM API. LocalPivot is broken because I have been too lazy to create or identify a replacement for Raphael's getBBox(true) functionality. So at the end of the day, here's the syntax I'm using in my project: TweenMax.to(/*SVG Node*/, 2, { svg: { scale:2, fill:"pink", rotation: 180} }); This has the following benefits for me: (1) I get to use GSAP for all my animation. Yay! (2) I get easy, intuitive access to matrix transformations. This is hard to come by for SVG outside of Raphael. (3) Less "magic" than Raphael and other SVG solutions. I'm simply simply tweening the "transform" attribute of my SVG elements, and I can understand where those values are coming from. Anyways, thanks again for your work on GSAP. Great stuff.

First of all, I'm long time fan. Greensock is great! I've been using GSAP in one of my projects as a unified platform for animating both SVG and HTML. Up until recently, I'd been using Raphael as my SVG library. GSAP's RaphaelPlugin was a nice abstraction from the messy matrix math underlying transitions between transform states. I got spoiled using scaleX, scaleY, tx, ty, localPivot, etc. Recently, I switched fron Raphael to D3, both for the data-driven functionality but also for more direct access/control over my SVG elements. (D3 focuses on transformation of SVG, whereas Raphael introduces it's own, special representations.) The change has been refreshing, but I miss the added functionality of RaphaelPlugin--especially for times when I simply want to spin and scale SVG elements using transform without thinking about interpolation, etc. [i'm not exclusively making graphs, but also flying spaceships around, etc.] So I went back and looked at RaphaelPlugin, and it strikes me that you're very close to having a general purpose, library-agnostic SVG plug-in for GSAP. The very few Raphael-specific methods (e.g., matrix, bbox) in RaphaelPlugin are mirrored in the SVG spec (e.g., getCTM, getBBox). With a little hacking, I got a prototype (mostly) working fairly quickly. Is there any interest in the community for such a thing? Have GSAP staff thought about this?