pbohny

Thanks Jack! Exactly what I wanted to do and miserably failed. I import the ESM version and it works like a charm-

Thought as much? but I don't know how to make a BlurPlugin.js file from the selfexecuting function. I would like to do as follows import BlurPlugin from "gsap/BlurPlugin"; gsap.registerPlugin(BlurPlugin);

Can I pack this in a plugin file and make it available like standard plugins?

I had tried that as well, no success. Setting the width with the selector in the console results in this: input: $('#mask-1 rect:first').attr('width','400') output: [<rect fill=​"none" x=​"0" y=​"0" width=​"400" height=​"427">​</rect>​] Somehow I should be able to tween these values?

If I have somthing like <defs> <clipPath id="mask-1"> <rect fill="none" x="0" y="0" width="500" height="400"></rect> </clipPath> </defs> I can change the width with jquery like so: $('#mask-1').children().first().attr("width",300) Now I am trying this: TweenMax.to($('#mask-1').children().first(), 2, {width:300}); and var mc = $('#mask-1').children().first(); TweenMax.to(mc, 2, {width:300}); What am I missing?

I think I figured something out, please could somebody confirm, that my assumptions are correct? You don't manipulate the matrix directly, its just a representation of calcualted values. You use standard commands like e.g. {raphael:{'scaleX':0.5} This controls scaling, with 'rotation' I control rotation and with x and y the translate.x and y values. But why are the pixel values a 10-fold of the real value, meaning it's {raphael:{'x':3000} to move 300px?

this is my element I want to access <rect x="0" y="0" width="896" height="504" r="0" rx="0" ry="0" fill="#55edff" stroke="#eeffdd" opacity="1.0" stroke-width="25" stroke-opacity="1.0" fill-opacity="1.0" vector-effect="non-scaling-stroke" transform="matrix(0.1,0,0,0.2,403.2,201.6)"> </rect> acccessing e.g. the opacity works great: TweenMax.to(rectangle, 5, {raphael:{'opacity':0.2}, ease:Elastic.easeOut}); but how would I access the values in the transform attribute? transform="matrix(0.1,0,0,0.2,403.2,201.6)"

I do have editable TextAreas on my screens. The user can input text, change format etc. and drag and place it anywhere on the screen. New position and styles are being saved. As it is no problem for the user to change the textfield size via TransformManager handles, it would be nice to see the box resize dynamically while typing in width and on 'return-key' in heigth. But more important, I'd like to see the box around the textArea resized according to the content when a instance is redrawn to the stage. Now I always have the default height and width horizontal and vertical scrollbars. I don't necessarly want to save the width/height of the TextArea. How can this be done. Is there a autosize possibilty with TransformManager?

Now I see! That was it for the reverse problem. I had to clear the line before redrawing it. The stop timeline works as it should. Thanks once again

The same problem with stoping the timeline, while the boxes pause, the drawline continues. Where do I oversee the cause?

There is one last problem I have with this example and I just can't figure it out. Playing, stopping and reversing the timeline works fine for the boxes, but the Drawlines instances won't reverse. Why is that?

Thank you so much!

...a Phew back from me! This could be my day, Switzerland has just beaten Spain at the World Cup (Soccer for all US friends) and there might be a solution to my problem. I have not yet had the time to really understand your response and to correct my code, but I am once more impressed by the brains and the effort you put into your support. As I am more of a designer than a coder, I must blame you for tearing me into your excellent set of Classes. I am doing things I never was dreaming of. I am worried I have gone to far. If you say it was "tricky", how could I ever understand it? I will try tommorow. You would not be able to post my project back, worrking with you corrections?

I do not really see where the problem is in my attached example with the pause property. Sorry, please help.

Hi Jack I am attaching a simple project: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([AutoAlphaPlugin]); var timeline:TimelineMax = new TimelineMax({paused:true}); init(); function init():void{ //drawLine(); drawBox(); drawBox2(); play_btn.addEventListener(MouseEvent.CLICK, playHandler) stop_btn.addEventListener(MouseEvent.CLICK, stopHandler) reverse_btn.addEventListener(MouseEvent.CLICK, reverseHandler) } function drawBox():void{ var test:TestBox = new TestBox(); test.visible = false; addChild(test); timeline.insert(test.animateIn(),0); } function drawBox2():void{ var test2:TestBox = new TestBox(); test2.visible = false; addChild(test2); timeline.insert(test2.animateIn(),2); } function drawLine():void{ var line:DrawLines = new DrawLines(); addChild(line); timeline.insert(line.drawLine(),2); } function playHandler(event):void{ timeline.play() } function stopHandler(event):void{ timeline.stop() } function reverseHandler(event):void{ timeline.reverse() } The 2 TestBox instances work as expected, but when I uncomment drawline() function, drawline works fine but the other two timelines won't play anymore, they only show the last frame. With only the drawline() function active, it works as expected. How can I use the DrawLine Class correctly, so all three nested timeline play accordingly?

Ease problem solved, forgot to import easing classes!

Good idea to add a line drawing plugin to the API, but please add a dashed/dotted property to the class as well. I am having problems adding an ease property, your example returns

The project is a large flex project, but I have reconstructed a FLA file (see attachment), that behaves as my problem in flex. It's a callback function that calls a method with a tween. This tween will not stop with the timeline. Please advice. stepByStepTimelines.fla.zip

I am talking about a TimelineMax instance with another nested TimelineMax instance

I have a problem I would like some advice on: I need to write a function to step trough a timeline frame by frame. Nested in the target timeline (mainTimeLine) are other timelines (e.g. childTimeline) with tweens. I have set useFrames of mainTimeline to true and play/stop myself trough the mainTimeline frame by frame. That works fine, but a soon as the label where childTimeline is inserted comes up, childTimeline starts playing the full timeline. What would be a solution to sync the childs frames with the parents frames. The same happens, when I play the mainTimeline and stop it in the middle of the nested animation, the nested one continues playing. So how to pass the stop() to the nested timeline?

No, there isn't. I load and parse the xml and would now like to create the Timeline, insert the nested timelines (see viewtopic.php?f=1&t=287&p=1147&hilit=animate+drawing#p1147) that starts playing at the time provided. Now I would start playing the main timeline and have the nice features of pausing, reversing etc. Sorry, I am blocked. I tried with the callback method with no success.

I am most likely approaching the issue in a twisted way, so let me formulate what I want to achieve in the most simplest way: I want to play soundfile (dynamic) and I want to animate many isntances of something like this: http://forums.greensock.com/viewtopic.php?f=1&t=287&p=1147&hilit=animate+drawing#p1147 at certain times down the soundfile (and linked timeline). All is dynamic and has to be created at runtime with params parsed from an xml.file Does this make more sense?

Thanks for you example, it's quite impressive to see your approach with the slide class and the the slides extending it. I just wonder how you would approch this case: The fundamental driver (length of timeline) of my animation is given by a loaded soundfile. While the soundfile is playing, a synchronized TimeLineMax instance is playing as well. ( I simply fire start, play and pause for sound and timeline in the same functions). From an xml file I do get params to draw objects (e.g. a circle with radius, fillcolor, alpha, line etc.) as well as a the times when this object ought to be drawn or removed. I use a Class FocusCircle with a method drawCircle() creating an animated drawing of the circle. //initialize focus public function insertFocuses():void { var i:int; var focusCircle:FocusCircle; var fadein:Number var fadeout:Number var numFocuses:int = xmlAction.focuses.focus.length(); for (i=0; i sequence_TL = new TimelineMax({onComplete:sequenceTimelineEnd}); focusCircle = new FocusCircle(); focusCircle.name = xmlAction.focuses.focus[i].name; focusCircle.xPos = xmlAction.focuses.focus[i].posX; focusCircle.yPos = xmlAction.focuses.focus[i].posY; focusCircle.fillColor = Number(xmlAction.focuses.focus[i].color); focusCircle.fillAlpha = Number(xmlAction.focuses.focus[i].fillalpha); focusCircle.strokeColor = Number(xmlAction.focuses.focus[i].linecolor); focusCircle.strokeAlpha = Number(xmlAction.focuses.focus[i].linealpha); focusCircle.strokeWeight = Number(xmlAction.focuses.focus[i].lineweight); focusCircle.radius = Number(xmlAction.focuses.focus[i].size); focusCircle.drawingTime = Number(xmlAction.focuses.focus[i].tempo); fadein = Number(xmlAction.focuses.focus[i].fadein); fadeout = Number(xmlAction.focuses.focus[i].fadeout); focusCircle.visible = false;//will only be changed by autoAlpha instance of TweenMax focusCircle.alpha = 0; objectsLayer.addChild(focusCircle) stageObjects.push(focusCircle); sequence_TL.insert(new TweenLite(focusCircle, 0, {delay:fadein, x:0, y:0})); sequence_TL.insert(new TweenLite(focusCircle, 1, {delay:fadein, autoAlpha:1})); sequence_TL.insert(new TweenLite(focusCircle, 1, {delay:fadeout, autoAlpha:0})); //insert sequence timeline into main timeline analysis_TL.insert(sequence_TL); } } I do get a working result with this code (the objects fadein nicely at the fadein time, but they are already drawn obviously, which is ok for static objects). Instead of autoAlpha, I would rather start the draw method of my FocusCircle class at the fadein time. How would this be done correctly? Regards

Is the source code (projects) of the interactve examples (e.g. TimelineLite and TimelineMax) and the header movie on the frontpage available anywhere on your site. Couldn't find them. I think they would help a lot. Regards

Thanks for the reply. My problem is solved, everything is much simpler than I thought, my approach was just to complicated. Here is my XML driven timeline animation import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([AutoAlphaPlugin]); var xmlLoader:URLLoader = new URLLoader(); var xmlData:XML = new XML(); xmlLoader.addEventListener(Event.COMPLETE, LoadXML); xmlLoader.load(new URLRequest("data.xml")); function LoadXML(e:Event):void{ xmlData = new XML(e.target.data); createRectangles(); } function createRectangles():void{ var i:int; var numRecs:int = xmlData.rec.length(); var lineWeight:Number; var lineColor:Number; var fillColor:Number; var rectWidth:Number; var rectHeigth:Number; var rectStartX:Number; var rectStartY:Number; var fadein:Number; var fadeout:Number; for (i=0; i var timeline:TimelineMax = new TimelineMax({onComplete:timelineEnd}); var mc:Sprite = new Sprite(); mc.name = "mc"+i; addChild(mc) rectStartX = Number(xmlData.rec[i].startpoint.@px); rectStartY = Number(xmlData.rec[i].startpoint.@py); rectWidth = Number(xmlData.rec[i].dims.@w); rectHeigth = Number(xmlData.rec[i].dims.@h); fillColor = int(xmlData.rec[i].skin.fillcolor); lineColor = int(xmlData.rec[i].skin.linecolor); lineWeight = int(xmlData.rec[i].skin.lineweigth); fadein = Number(xmlData.rec[i].fadein); fadeout = Number(xmlData.rec[i].fadeout); mc.graphics.lineStyle(lineWeight, lineColor); mc.graphics.beginFill(fillColor); mc.graphics.drawRect(rectStartX,rectStartY,rectWidth,rectHeigth); mc.graphics.endFill(); //mc.visible = false; mc.alpha = 0; timeline.insert(new TweenLite(mc, 0, {delay:fadein, x:100, y:100})); timeline.insert(new TweenLite(mc, 1, {delay:fadein, autoAlpha:1})); timeline.insert(new TweenLite(mc, 1, {delay:fadeout, autoAlpha:0})); } } function timelineEnd():void{ trace("end") } P.S. Yes I did watch your video and I intentionally used insert because I wanted to control the timeline position of nested objects in relation to my root timeline. My delay properties always relate to the root progress. This way I can nest as many layered timelines as I want and make sure that the length of my main timeline is not extended. Your API (especially the timeline classes) gives me sleepless nights because I realize what the potential of using it is. It lets my mind flow. Unfortunately I am only a mediocre developer and do not have the capabiliy to simply transform my vision into code. Again, thanks for this great API!