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?