pablolo

Thanks a lot Rodrigo. I got it. But I think I finally find the perfect way. To tween a dummy object and use its proprieties to change the Snap object. Now I can use the SnapSVG with the power o Greensock! \0/ var dummyObj = {}; dummyObj.rotation = 0; dummyObj.opacity = 0; TweenLite.to(dummyObj, 1, { opacity:1, rotation:170, ease:Elastic.easeOut, onUpdate:this.applySnapTweens, onUpdateParams:["{self}", snapSVGElement] }) var applySnapTweens = function(tween, snapEl) { var degrees = tween.target.rotation; var opa = tween.target.opacity; snapEl.transform("r" + [degrees, 0, 0]); snapEl.attr({"opacity":opa}); } I hope this topic helps other people starting with SnapSVG as well.

Thanks a lot Jack. Of course, I understand. I am not complaining! I am just trying to see how it works by myself. This is for a personal project, just digging into SnapSVG, since it looks promising. I am trying to implement the onUpdate method as you suggest and then I find another doubt. how do I get the current value of the var being tweened on the onUpdate function? I am using: rotation:30, onUpdate:myFunction, onUpdateParams:["{self}"] but the "vars" propriety always show the final value of "rotation" (30) and not the current value. I couldnt find the current value logging the "{self}" parameter. :/ Am I doing something wrong?

Diving here: When rotating with their animation engine, this is the <text> tag: <text x="282" y="698" fill="#e607c1" style="font-size: 94px; opacity: 0;" transform="matrix(-0.809,-0.5878,0.5878,-0.809,626.4715,949.5529)">A</text> While using Greensock "rotation" tween, this is how it ends: <text x="792" y="392" fill="#c2570b" style="font-size: 46px; opacity: 1; -webkit-transform: matrix(0.64278, 0.76604, -0.76604, 0.64278, 0, 0);">R</text> But the second rotation really does not affect the object. Is there any way to hack Greensock to make it affect the object?

Michael71, unfortunately SnapSVG does not create html ids for the objects. Carl, the .node object did the trick. But it seems that svg <text> objects does not accept matrix transformations, so tweening "x" does not work, while it works using the boring "animate" built in in snap, because it changes the "x" propriety of the <text> tag directly. Anyways, I dont know if it is the place, but a vote here for a SnapSVG plugin! Thanks a lot for the help.

Any plans to support SnapSVG with a plugin? We are testing the SnapSVG library here and it looks great, but the animation engine sucks soooo much for someone using Greensock for years. Meanwhile, is there any approach so we can animate SnapSVG proprieties? For example to make the "letter" object below to tween to opacity=1. var letter = this.snap.text(0, 0, "Just a random text").attr({ "font-size": "20px", "opacity":0 }) Couldnt figure it out till now. :/

thanks a lot green did you try it? I have tried for a few moments without success. Not working. I will try harder later.

Thank you very much for the reply, Carl. I thought about that, but I am doing an app for iPad, which means that optimization is like the MOST important thing and iterating back and fourth trough an array doesnt sound very optimized. At the same time I know how you guys here are optimization ninjas, so any clue on how to do it in the best way would be awesome. Thank you again anyways.

Anyone know an easy wat to Randomize a TimelineMax? I want to append several TweenMax instances and depending on user behavior, play the timeline with the instances in a different (random) order For example, first plays it normally: var timeline:TimelineMax = new TimelineMax({repeat:0}); // timeline.append( TweenMax.from(mainMC1, 1, {alpha:0, blurFilter:{blurX:100, blurY:100}})-0.5); timeline.append( TweenMax.from(mainMC2, 1, {alpha:0, scaleX:0.1}), -0.5); timeline.append( TweenMax.from(mainMC3, 1, {alpha:0, scaleY:0.1}), -0.5); timeline.append( TweenMax.from(mainMC4, 1, {alpha:0}), -0.5); timeline.append( TweenMax.from(mainMC5, 1, {alpha:0}), -0.5); // and then restart with timeline.invalidate(); timeline.restart(); and then "randomize" the appends is if it was like this: timeline.append( TweenMax.from(mainMC5, 1, {alpha:0}), -0.5); timeline.append( TweenMax.from(mainMC2, 1, {alpha:0, scaleX:0.1}), -0.5); timeline.append( TweenMax.from(mainMC1, 1, {alpha:0, blurFilter:{blurX:100, blurY:100}})-0.5); timeline.append( TweenMax.from(mainMC3, 1, {alpha:0, scaleY:0.1}), -0.5); timeline.append( TweenMax.from(mainMC4, 1, {alpha:0}), -0.5); any ideas?

Yeah, same to me. I just became "shockingly green" and got this error.

Is there any specific reason why the TweenProxy3D class is not included on the .swc ? Thanks in advance, Pablo