DivisionBoy

This is for personal use. Sorry, I removed the links.

Hi, I'm trying to port TransformManager to TypeScript. Here's what is at the moment: [remove] Approximately 85% of the code is identical to the original. There was a problem that I can not solve. If you change the width of the object, and then rotate it, then the object will make a skew. Probably, the problem is in the scaleRotated() method of the TransformItem.ts class, but I cannot determine the reason. Is there any solution? The project on TypeScript has attached with source classes. [remove]

Sorry, I forgot to specify that I tested it on a special weak computer. System: Processor: Intel Core 1.86 GHz RAM: 3.25 GB On my work computer, there is no problem. But the problem is that the customers are very demanding on the performance, as their resources sometimes simultaneously, on a single page, located at 5-10 advertisers.

ok, thanks

If the shape a smaller, then everything is fine! But how then to be, if you need a specific size shape?

desktop windows 8 chrome 50 I guess it kind of depends precisely on GSAP. Because if you comment out the tweens, then there is no memory leak. With tweens in my Task Manager, the memory is loaded under 90% (!) http://codepen.io/DivisionBoy/pen/bpQomR

When I use a tween, there is a constant memory leak, until the application is stopped. Performance also falls. This is due to the "cache". shape.cache(-0.1, -0.1, width, height); Here is my simple code, maybe I have something wrong? window.onload = function() { var canvas = document.getElementById("canvas"), stage = new createjs.Stage(canvas); function createShape(radius, width, height, color){ var shape = new createjs.Shape(), g = shape.graphics; stage.addChild(shape); g.beginFill(color); radius > 0 ? g.drawCircle(0, 0, radius) : g.drawRect(0,0, width, height); g.endFill(); shape.setTransform((width/2),height/2,1,1,0,0,0,width/2,height/2); shape.cache(-0.1, -0.1, width, height); return shape; } var Layer_1 = createShape(0,556,409,"#b8aa51"); Layer_1.x = 275; Layer_1.y = 198.5; var main = new TimelineMax( { onComplete: again } ); main.set(Layer_1, {x:275, y:198.5, scaleX:1, scaleY:1, rotation:0, alpha:1, easel:{tint:"#000000", tintAmount:1} } ); var Layer_1_tl = new TimelineMax(); main.add(Layer_1_tl, 0); Layer_1_tl.to(Layer_1,0.9, { easel:{tint:"#e13a3a", tintAmount:1}, ease:Linear.easeNone } ); Layer_1_tl.to(Layer_1,1.1, { easel:{tint:"#75b851", tintAmount:1}, ease:Linear.easeNone } ); Layer_1_tl.to(Layer_1,1.1, { easel:{tint:"#b8aa51", tintAmount:1}, ease:Linear.easeNone } ); TweenLite.ticker.addEventListener("tick", stage.update, stage); stage.update(); function again() {main.restart()} }

Hello, Dipscom! When I add all tweens into one timeline, animation does not play, and I do not understand what's wrong? http://codepen.io/DivisionBoy/pen/pjJJey

hi, I can not figure out how to restart the banner? I tried to do mainTimeline.add(otherTimeline)...etc but the animation does not play. It is possible to add some global function to restart all the Tweens? http://codepen.io/DivisionBoy/pen/xwKWmE

Dipscom, thank you very much for the solution of the problem and fix my code, you are very helpful! Carl, exportRoot great thing, definitely come in handy in the future, thank you!

Hi! I began to understand a little GSAP. But i can not understand how can gradually stop repeat animation? I've seen this http://greensock.com/forums/topic/12302-stop-looping-banner-after-a-set-amount-of-seconds/ but I need to stop the animation smoothly, as possible? For example, I need to gradually stop the movement of the car after three seconds. function stopCar() { /*some script to stop a car*/ } setTimeout(stopCar, 3000) http://codepen.io/DivisionBoy/pen/xwKWmE

Wow, thank you!

I'm working with JS. MovieClip I mentioned for example. I expect that TimelineLite, this kind of "MovieClip". Interested in response ohem, it's really the right approach to use for this div containers? If possible, it can be any simple example with div containers?

Hi! Tell me, is it possible to make animation in groups(MovieClip), as is done in the editor Flash Pro? It should be something like a "MovieClip", which is located inside the other "MovieClip". As I understand it, in GSAP, TimelineLite must be in the TimelineLite, it will be the same as the "MovieClip" in the "MovieClip"? I made a video example of what we would like to achieve. How would it look in GSAP?

Thanks for the quick answers! I did not know about TimelineMax, I will understand

I recorded a short video to make it easier to understand what I mean. http://www.youtube.com/watch?v=lD9ZjlTwgjg I'm writing a simple video editor. For any object on the track, you can add motion effects, which I implemented using TweenMax. The problem is that when I move the slider on the timeline I need to show the effect of either forward or backward, depends on which way to move the slider. For this I use the method renderTime() and all is well, but the animation effect is not correct, because renderTime () do not support the "delay" property. In the video is clearly seen as part of the picture move synchronously, while should take into account the interval (delay) before each of the parts of the picture. private function prepareTween():void { var tweenM:TweenMax = TweenMax.to(arrSlice[j], currentSpeed, {alpha:alphaTween, x:arrSliceX[j], y:arrSliceY[j], rotation: rotateTween, scaleX: scaleXTween, scaleY: scaleYTween, delay:(currentDelay * d) / 10, ease:arrTweens[currentTween], blurFilter:{blurX:blurXTween, blurY:blurYTween, qality:2, remove:true}, onComplete:endEffect, onReverseComplete:endEffectReverse} ); arrTweens.push(tweenM); j++ } //when I move the slider on the timeline public function moveSlider(time:Number):void { for (var i:int = 0; i < arrTweens.length; i++ ) { arrTweens[i].renderTime(time); } }

How to use renderTime() with "delay" properties? Is that possible?