Jump to content
Search Community

kittichai

Members

  • Posts

    23

  • Joined

  • Last visited

 Content Type 

Everything posted by kittichai

  1. kittichai
    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.
  2. kittichai

    left/top vs x/y

    kittichai posted a topic in GSAP

    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 }
  3. kittichai
    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.
  4. kittichai
    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.
  5. kittichai
    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}});
  6. kittichai
    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.
  7. kittichai
    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.
  8. kittichai
    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.
  9. kittichai
    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.
  10. kittichai
    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!
  11. kittichai
    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?
  12. kittichai
    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).
  13. kittichai
    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?
  14. kittichai
    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.
  15. kittichai
    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?
  16. kittichai
    YEah! That's cool features. Thanks for your quick reply. Anyway, just to be sure: 3) Do I have to disable onEnterFrame myself or Greensock platform preventing it for me? If I have to like disable frame rendering, add tween, then enable it again... what would be the line of code needed to disable it? 4) The thing with my 0.0001 duration Tween is, this Tween can be play either forward or reverse, and I want to hook events when it "start" and "complete" on both directions (). And... you didn't have onReverseStart for me to hook. So I have to hook onUpdate instead. I will not be able to distinguish them any otherwise.
  17. kittichai
    Here's the sample code: timeline1 = new TimelineMax(); var tween1:TweenMax = new TweenMax(spriteGreen,0.0001, {x:600, ease:Linear.easeIn, paused:true}); timeline1.insert(tween1,1.5); trace(tween1.startTime); tween1.paused = false; trace(tween1.startTime); The result of running the above code will be: 1.5 0 1) Why is that unpausing tween within timeline change its startTime? 2) I recall you mentioned that it is unnecessary to assigned paused:true at TweenMax constructor. But, how can I ensure that the Tween will not finish executing before adding to timeline? I have to assign the above duration of 0.00001 because I need to hook onComplete function. Which, if duration of Tween is 0, the onComplete will not work correctly. Please give me some fix soon.
  18. kittichai
    I pause all TweenMax at constructor to make sure that all Tween will not run before inserted to Timeline. Is there other way I can do to make sure it won't happen? I am concern that if I create lots of Tween before insert to Timeline, some may run before Timeline can manage them. It's irritating having to pause in every constructor. If u have best practice, please suggest. Anyway, thanks for the quick fix!
  19. kittichai
    Note that, the result of calling a() will appear random. Each time I run the program, it will not produce the same number except the first call to a() on each session will be 5.3
  20. kittichai
    I create a timeline and its totalDuration does not equal the duration of the Tween inside it. Here's cut of my code, let's call this function a(); private function a():void { _timeline = new TimelineMax({paused:true, onComplete:onCompleteFunction}); var newTimeline:TimelineMax = new TimelineMax({paused:true}); var tween3:TweenMax = new TweenMax(mainStageScrollRect, 5.3, {x:pageTo.coreDisplay.displayObject.x, paused:true}); newTimeline.insert(tween3); tween3.paused = false; _timeline.insert(newTimeline, 0); newTimeline.paused = false; trace("-----------------------------------"); trace(_timeline.totalDuration); trace(newTimeline.totalDuration); } The result when I run function a() 3 times are as follow: ----------------------------------- 5.3 5.3 ----------------------------------- 12.143 12.143 ----------------------------------- 91.938 91.938 the first time i call function a(), the _timeline.totalDuration appears to be 5.3 perfectly. But, when I call it for second time, the totalDuration increse to some random number and keep increasing to some random number. When I check, its totalDuration will equal its startTime. I understand that startTime of newly create Timeline will be equal to the rootTimeline's current clock, but should it effect totalDuration? How can I get the real totalDuration of what I insert in? This is really important to me to get the exact totalDuration because my program architecture does not allow me to get it otherwise.
  21. kittichai
    Originally, I don't want to do anything with startTime. But my animation run into strange problem, it can only run once and have to restart program to make it run again. My program is quite complicate to post here, but it works like this. It will load files from user's selection and animate. Since user can change files and play, every time they play it I have to recreate Timeline and Tween to make sure that it reflect newly update content. I trace my program and found out that the more time user press play, the higher the initial value of startTime property of Timeline. For example: 1st play - Timeline.startTime value as I planned, in animation, let's say 2 seconds. 2nd time - the same line of code creates Timeline.startTime increase to 10 seconds 3rd time - it create Timeline.startTime at 30 seconds..... and so on and on So, it keeps getting higher and higher to the point where animation won't occur at all. But, as you explain, startTime is global clock refer to the creation of Timeline engine (which I don't see it any where in documents), shouldn't you just make it read-only property? Refer to your documents of TweenCore.startTime, it said "Start time in seconds (or frames for frames-based tweens/timelines), according to its position on its parent timeline" Question 1: So, let me guess, if this Timeline has no parent, just like the Timeline I created, then its startTime is refer to global, right? and if it been insert into another Timeline, then it is change to refer to its parent? Question 2: And, if so, can I change startTime only when it's inside another Timeline? If so, then I will have to review my program again with this understanding.
  22. kittichai
    I trace the source code and found that TweenLite.rootTimeline has been assigned via TweenLite.initClass(); So, I add source code that call this class directly in my initialize module, but it makes my program not animate at all, just like your recommendation not to call it. So, how can I reset TweenLite.rootTimeline?
  23. kittichai
    I have create a TimelineMax using command like this: _timeline = new TimelineMax({paused:true}); I trace debug my code before and after this simple line of code and found out that startTime is not 0. It keeps increase value anytime I repeat this line of code to the point that any tween inside it won't run at all because startTime increase to like 7,000+ seconds So, I try to add initial value like this: _timeline = new TimelineMax({paused:true, startTime:0}); And trace, the startTime still increase. So, I add your source code and trace into your class, and found the line of code that cause startTime to initialized at value not 0. It's in TweenCore.as line 89 var tl:SimpleTimeline = (this.vars.timeline is SimpleTimeline) ? this.vars.timeline : (this.vars.useFrames) ? TweenLite.rootFramesTimeline : TweenLite.rootTimeline; after execute the above line, tl seems to have rawTime, startTime, cachedTotalTime to be non-zero value. Note that the value is random and keep increasing everytime I run the code, so I don't post the value here. What happen? I really can't understand that line of code much, but it seems that tl is assigned with static variable TweenLite.rootTimeline which still have some junk value in it. Can I reset those value?
×
×
  • Create New...