kittichai
kittichai's Achievements
0
Reputation
-
My mistake, I post incomplete code. My code did add the tween into timeline. I found a scenario where this problem will occur. If TimelineA is insert into TimelineB, and TimelineA has duration 0 while TimelineB's duration is not 0. TimelineB will has problem raising event as well. So, to fix this problem, I must add dummy TweenMax to every timeline nested inside.
-
Continue from http://forums.greensock.com/topic/7763-tell-tweenmax-to-uses-translate3d-instead-of-translatexy/ I think this topic deserves a separate post. Jack mentioned that left/top perform better than x/y. Here's my issues: 1) css left/top will have [a] sub-pixel problem rendering (round-to-pixel) in most browser, so I choose to use x/y which will enable greensock to uses translate. Please read: http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ Translate of multiple objects perform sometime perform worse than left/top. But sub-pixel problem is worse. I test it on iOS, simply move large image (such as 1024x768) will allow you to see the problem with non-translate3d movement. 2) According to what you suggest, to enable hardware acceleration, does it means that I have to use left, top & z ? { css: { left: '500px', top: '30px' } z: 0 }
-
When timeline's duration is 0, it won't raise any event (onComplete, onStart, onUpdate, etc.) In ActionScript version, I used to fix this problem by adding a temp TweenMax with duration 0.001 and the even will work just fine. However, in JS version, it still doesn't fix the problem fixZeroTimeline = function(timeline) { if (timeline.totalDuration() <= 0) { var tempTween = TweenMax.to(dummyObject, 0.001, {paused:true}); tempTween.paused = false; } }; After calling this function, timeline still doesn't raise event.
-
One more thing, I have test it and inspect element, it uses matrix3d as you said. But, I found out that if I specify the frame rate using TweenMax.ticker.fps(30); The animation will not feel smooth, regardless of the fps (I have tried from 20, 25, 30, 40, 60. All not smooth) Do I misunderstand something? I thought, back in the Flash day, fixing fps properly will make it looks consistent.
-
Thanks Carl. Is there a better way? I concern that z:0.01 will affect the performance of the engine. Also, is it: //uses transform matrix3D TweenLite.to("#bottom", 0.5, {x:200, z:0.01}); or //uses transform matrix3D TweenLite.to("#bottom", 0.5, {css:{x:200, z:0.01}});
-
Is there anyway to specifically tell TweenMax to uses CSS translate3D instead of translateX/Y to move object? I found that translate3D performance on various browser perform smoother than translateX/Y. but if I just use: TweenMax.to(object, 1, { css:{ x: '1024px', } } ); The code above will use translateX, which is much slower than when I use CSS translate3D @-webkit-keyframes slideIn { 0% { -webkit-transform: translate3D(1024px, 0px, 0px); } 100% { -webkit-transform: translate3D(0px, 0px, 0px); } } The platform that give the obvious difference is iOS. Also, can you just isolate the code for each demo in demo page? It's hard to dig down into the code on each page.
-
var sx = myElement._gsTransform.scaleX; I have try _gsTransform, do you also have this kind of hidden property like this that I can grab "clip" value? Where should I look in your source code for these property? This is very useful.
-
OK... I found the problem. I use incorrect minified version. So, why some version of TweenMax.min.js includes CSSPlugin, and some version don't? The paid version's min already include CSSPlugin, but the one I got from first page don't.
-
I have isolate the simplest code here: index.html <html> <head> <script src="jquery-1.8.3.js"></script> <script src="tweenmax.min.js" type="text/javascript"></script> <script src="index.js"></script> </head> <body> </body> </html> index.js (function() { 'use strict'; $(document).ready(function() { var divImage1 = $('<div>'); var onloadHandler = function () { TweenMax.to(image1, 3, {css:{clip:"rect(0px,275px,95px,0px)"}}); // TweenMax.to(image1, 3, {css:{left: "500px"}}); } var image1 = $('<img>');// image1.css('position', 'absolute'); image1.css('left','200px'); divImage1.css('top','0px'); divImage1.css('position', 'absolute'); divImage1.append(image1); $(document.body).append(divImage1); image1.css('clip', 'rect(30px, 80px, 80px, 30px)'); image1.load(onloadHandler); image1.attr('src', 'https://www.google.com/images/srpr/logo3w.png'); }); })(); The image appears clipped, as indicates by CSS. But, the TweenMax CSS clip doesn't animate at all. First, I tried just adding TweenMax and it didn't work, so I think may be I should wait for image to load. So, I add the TweenMax inside onload, still doesn't work. I have used debugger, and it definitely run the TweenMax line. If you remove the comment on another the line that said TweenMax.to(image1, 3, {css:{left: "500px"}}); You will see that image move just fine.
-
That might, but I have to make another thing works first. Can you help answer http://forums.greensock.com/topic/7090-why-dont-you-provide-a-real-source-code-for-each-of-your-demo/ ? I post it in incorrect forum. Thanks for your fast response!
-
Ken Burns Effect (http://en.wikipedia.org/wiki/Ken_Burns_effect), Peek (As in PowerPoint) and Wipe from bottom or right requires the following property to be animated in harmony: - Scale - Position - Clip Somehow, it seems that the transform and clip of the same frame is out of sync. I used to solve this problem in Actionscript version by making TweenMax that only animate scale, then hook its onUpdate to a function which measure the size and move position + recalculate clip in real-time, ensure that these properties are animated in the same rhythm. But, I don't know how to do it in Javascript since, on every frame, Javascript report original image size, not clipped size. So, can I receive the current, real-time value of clip or scale of the image from TweenMax?
-
TransformMatrixPlugin - Matrix is null
kittichai replied to kittichai's topic in TransformManager (Flash)
There's lot of benefit if I can have TransformMatrix3DAroundCenter. Of course, I can use scale and rotation to manipulate shape of object, but Actionscript base rotation point around 0,0,0, which limit animation effect and hard to calculate the spot to move object to make effect looks more like rotation around center. (May be not hard for you, but for me who have very limited knowledge in Trigonometry) Right now, I can't use your TransformAroundCenter if I have applied any rotation (either X,Y or Z will cause this error). -
TransformMatrixPlugin - Matrix is null
kittichai replied to kittichai's topic in TransformManager (Flash)
I did put some rotation in my code and it cause that error. If I change rotationX, Y, or Z it will cause error, even though rotationZ is not quite 3D effect. I understand your point about creating new Matrix() will cause all previous rotation to be overwritten, so my modification won't work. However, there's variety of animation that 3D transform can be useful, will you make TransformMatrix3D anytime soon? -
My program cause error in TransformMatrixPlugin at the code here: override public function onInitTween(target:Object, value:*, tween:TweenLite):Boolean { _transform = target.transform as Transform; _matrix = _transform.matrix; var matrix:Matrix = _matrix.clone(); It cause TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock.plugins::TransformMatrixPlugin/onInitTween()[D] because, somehow, the target's matrix is null. I have created short actionscript class to test my understanding on TransformMatrixPlugin, and it works just fine. I try to solve this problem by assign new Matrix to its matrix before creating Tween, like this: target.transform.matrix = new Matrix(); Which I have debug and see that it's definitely not null. The error persist. So, I put the following code into TransformMatrixPlugin.as override public function onInitTween(target:Object, value:*, tween:TweenLite):Boolean { _transform = target.transform as Transform; _matrix = _transform.matrix; if (_matrix == null) { // New Code _matrix = new Matrix(); // New Code } // New Code var matrix:Matrix = _matrix.clone(); And the error disappear. Program works smoothly. Will this be added to official greensock library? I don't know why my displayObject's matrix became null, and it's not greensock's error. But, this 3 lines of code solve the problem and doesn't seem to affect anything else. If you can add this into official library, I will be glad that I don't have to keep changing this code everytime I update the library Thanks.
-
set pause of Tween within Timeline cause startTime reset
kittichai replied to kittichai's topic in GSAP (Flash)
It's long story to explain my situation, you just gotta trust me that I really need it. And you have START, COMPLETE, REVERSE_COMPLETE but you don't have reverse start. Isn't that seems incomplete?