Search the Community
Showing results for tags 'tweenmax'.
-
Event passed as parameter to TweenMax.delayedCall becomes 0?
cerulean posted a topic in GSAP (Flash)
I'm sure there's an error in my code, but when I do this ($event is a mouseEvent) TweenMax.delayedCall(_gameClickDelay,showDetailScreen,[$event]); when I get to showDetailScreen($event:MouseEvent) private function showDetailScreen($event:MouseEvent):void { $event.current is no longer the button on which I originally clicked, but instead Stage, the trace is: $event.currentTarget = [object Stage] and $event itself traces as "0". trace("$event = " + $event); TweenMax.delayedCall(0,function ($x:MouseEvent) {trace("delayed call? " + x)},[$event]); yields $event = [MouseEvent type="click" bubbles=true cancelable=false eventPhase=2 localX=49.72636795043945 localY=109.43730163574219 stageX=487.6 stageY=709.2 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0] delayed call? 0 -
.scale on TweenMax v1.10.0 not working like previous versions
FrontEndWarrior posted a topic in GSAP
I built a cube that spins on touch with v1.9.8, which worked great but, when switching to 1.10.0, the .scale on line 17 of my example seems to not scale the entire cube anymore and distorts one side. Example: http://jsfiddle.net/GhTcW/2/ You can uncomment the old script (1.9.8) in the html section to see the difference. I am using Safari 6.0.2 BTW. Love your guys work! -
Hey guys, Found some behaviour that's causing me issues. I have an animation of a vehicle, that's yoyo-ing from left to right infinitely. In the onRepeat callback i'm flipping scaleX between 1 & -1 to flip the graphic. The problem happens when the browser tab is not active. The timeline may have repeated multiple times, however the onRepeat callback is only fired once when focus is returned to the tab. Therefore the orientation of the graphic can become out of sync with the actual direction. I realise that RAF halts all callbacks when the tab is inactive so, but I would have expected the onRepeat callback to be fired retroactively for the number of times the animation has technically repeated. Is the behaviour intended or a GSAP bug? For the moment I have changed my code to manually change direction based on the x vector in the onUpdate callback. Hope I've not rambled too much Look forward to your reply. Rob -
First, I want to be clear that I know that GS is highly optimized, and that in no way do I mean to imply there's any problem with the GS speed. I've never had one. I've been working on a large sectional project for 3 months where games are being run along with videos inside an external player. One of those games -- using rudimentary Flash 3D, etc and using a touchscreen for touch detection -- runs slower than the client wants. The issue is, of course, with the videos and the external player, and with the multitude of external videos being played. That having been said, is there anything I can do to turbo-charge GS — the game relies on many TweenMax's, TimelineMax's, etc -- to get some small performance boost? I was thinking of something along the lines of fine-tuning onUpdates, or something, perhaps make them check less often — grasping at straws here. We believe the fault is in the videos/player, again, but I thought I'd investigate all angles…
-
Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi
-
This is almost certainly a bug in my code, but I'm moving some elements forward in z-space (that is low to high z) using TweenMax's in a TimelineMax // pseudo code TLM:TimelineMax = new TimelineMax; for (var i:int = 0; i< someNumber; i++) { var tw:TweenMax = new TweenMax(anAsset,TWEEN_TIME,{onUpdate:doUpdate,onUpdateParams:["{self}"],z:someFinalZ}); TLM.add(tw,TWEEN_Time/i); } private function doUpdate($tw:TweenMax):void { sortElementsOnZPosition(); // sort all the elements display position based on z, using addChild() if (something) { $tw.timeScale(0.5); // slow down } else { $tw.timeScale(1); // set back to normal } } Sometimes I want to slow down the tweened elements' z-motion (and in a separate call I'm moving them on x axis), but when I want to set the tween back to normal speed, they suddenly jump forward in z-space, as if they were suddenly set back to where they'd been if they'd never been slowed. There's a lot going on behind the scenes, including addChild()-ing the elements (based on a z-sort), etc. Surely something in my code, but the tweens are pretty separate from everything else, so I'm wondering if there's something related to timeScale of Tweens in a Timeline that I'm missing. Thanks!
-
Hi, I am not able to tween an object in bezier path. More precisely, this statement is not working for me, neither am i getting any error in the console :- TweenMax.to(croppedimg, 5, { bezier:[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}], onUpdate: function(){ layer.batchDraw(); }}); Attaching the html and javascript code also bezier.html
-
Everything seems to to set correctly, and the opacity transition works fine, but nothing happens with scale: TweenMax.set(letter, {opacity:.5, scale:.4, transformOrigin:"50% 50%", fill:c}); TweenMax.to(letter, 1, {opacity:1, scale:1, ease:Elastic.easeOut.config(1), delay: i*.1}); I don't think anything too crazy is going on with my code... Anybody else run into a similar problem?
-
I have a situation where I want to have a number of objects tweening from different starting points towards a common goal. They are moving in the same direction, and should move at the same pace. I also want to get rid of the object when it reaches its goal, and add a new one (or the same one) at the back of the queue. Picture a line of people moving forward in a queue: they shuffle forward slowly, all at the same speed. We start the queue with a line already formed, that is, we 'open the scene' with the line in place. Is there a way to do this with TimelineMax? I had thought of something like this _mainTimeline.to(_people,TIME,{z:"+=1000"},"+=1"); But they won't all end up at the same end point. If I substitute a fixed end point (i.e. z:1000) then they won't move at the same pace, since they distance they must cover is different. I also need to figure out a way to keep adding and removing from the queue. I suppose the answer might be to maintain an array of TweenMax's, or simply to do old-school ENTER_FRAME +='s, but I very much like the robustness of TimelineMax
-
Besides convenience, it should be implied that if you have an element positioned 'left', and you desire to animate it's 'right' property, that 'left' should be unset. It doesn't make sense to animate a property that would yield no effect, and that you'd need to manually unset the conflicting property. Same with 'top' and 'bottom'.
-
I've been making good use of TimelineMax's convenience methods: timeline.to(....), etc. As I understand it, these are syntatic sugar for timeline.add(Tweenlite.to(...)), etc Is there a way to change it so that the convenience methods would instead use TweenMax? Ran into an issue where I was trying to use 'yoyo' but wasn't working…and it's because TweenLite doesn't offer 'yoyo', I believe. I offer it as a suggestion for future releases, if it's not currently implemented.
-
This seems like it should be a no-brainer, but I've searched the API and can't see how to kill a Tween(Max) and force it to complete. I see how to kill ALL tweens and force to complete, or child tweens of a particular object and force them to complete, but for a TweenMax I didn't see the option to force to complete. Could someone point me in the right direction? Thanks!
-
Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})
-
Hi there, I read this forum front to back and can't find a solution for my problem. We're using the TweenMax pack on a animation and it works amazingly on Chrome, FF and Safari, as you would expect. Even IE9+ is a doozie and we're not having problems with that. HOWEVER, IE8 insists in not playing ball. So after a lot of debugging and fiddling around, I have two questions for you. 1) I notice that a few of the animations use "filter:progid:DXImageTransform.Microsoft.Matrix" while other will use use margin to move things around. Why's that? I can't find a pattern why TweenMax. The animations that use "filter" work fine. But... 2) The animations using margin don't. If I use "TweenMax.to" it disregards the current position of the element and starts from 0x0. The "from" values below are also disregarded and the animation starts from 0x0. TweenMax.fromTo(_cloud_small, 4.6, {css:{x:600}}, {css:{y:120, x:200}}); We've tried changing 'x' and 'y' to 'left' and 'top' and a whole bunch other things, but nothing seems to work. It is as if on onStart the the object's margin is set to 0 and the animation starts from there. Why, I ask you, WHY? I've spent a few hours on this now, and I can't understand the reason. Any clues will be most appreciated! Hug of the bear and thanks!
-
Hi Everyone! I have problem with figure out method to scroll snapping to the nearest point. I'm using Superscrollama. This is my testing site: http://arcadioenmadrid.es/scroll/2mojedemoFOLIO.html First DIV is pinned by superscrollama for 3000px after this it scrolling up and there will be second pinned DIV for next some pixels. I would like to make something snapping like on this site: http://www.kosmostumostow.pl So in my case if user stop scroll at <1500 after 1 second site should auto scroll to 0px if he stop on >=1500 site should scrolling to the next DIV. I tried various methods with setTimeout and it never works. Browser snap to for example point 0px and I can't scrolling or looping function till browser crash on it. Anyone could me help with this? I'll be grateful. Thanks! p.s. Maybe someone know why don't work trasition background to white on Chrome and on Firefox is okay?
-
Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi
-
Is there any reason one can't TweenMax.updateTo() a TweenMax nested inside a TimelineMax? I'm sure it's me, but it's driving me crazy. I do this (I have an object being tweened from z:500 to z:0 or something like that, but not on x), thus (simplified): _obstacleTimeline.add(TweenMax.to(obstacle,OBSTACLE_SPACING-1,{z:obstacle.finalZ})); and later $tween.updateTo({x:stage.stageWidth,autoAlpha:0,ease:Quint.easeIn},false); and the object that's being tweened does what it's supposed to and then goes _back_ a way in z-space and comes forward again from the left. I'm not restarting the tween (updateTo(...,true)). Again, I'm sure it's me, but have been checking this for 1/2 hour and see no errors on my part…
-
Hey guys quick question. Do you know of any reason to why my hitTestObject wont initiate when i add this line to my mcPlayer Class: TweenMax.to(this, 1.5, { x:120, ease:Power0.easeInOut } ); My hitTest function works perfectly fine but once i add this code to it, my player just goes straight through the object this is how my mcPlayer class is setup public class mcPlayer extends MovieClip { public function mcPlayer() { addEventListener(Event.ADDED_TO_STAGE, onAdd); } private function onAdd(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, onAdd); init(); } private function init():void { TweenMax.to(this, 1.5, { x:120, ease:Power0.easeInOut } ); }
-
I have a game in which when an object — let's say its a kitten — goes on one side of a border line (there are two, opposite sides of the screen), a blinking alert line needs to flash. I set the flashing alert to be a tweenmax, alpha on and off, repeat:-1, yoyo:true. The issue I'm dealing with is there are maybe a hundred kittens. I need to have the tween running when any of them is the 'wrong side of the line' and off when all are on the right side of the line (again, there are two lines, but you get the idea). When they are all back in the kitty-corral then the tween needs not just to stop, or disappear (be killed), but tween alpha to 0. I can think of several ways to handle this, but not an elegant way. I feel certain that there is something in the Overwrite manager that would help me — but I'm not sure. I don't think I can simply kill() the tween since there's no bringToCompletion flag as there is with killAll — and in any case how do I make it so one kitten doesn't ruin it for everyone (i.e. killing the tween before everyone is home). I ended up just keeping a flag count and on ENTER_FRAME checking it, when it was 0 then tween the tween to 0. But it wasn't that elegant and wasn't working that well. Does anyone perhaps have a better suggestion? Thanks for any help!
-
I'm curious if there's a way to update a TweenMax on the fly so that it will continue to its original destination but from new start points. I see how to update the destination. I'm asking because I have a situation in which I have a Tween in progress but sometimes (randomly) I will want to stop that tween and have the object head somewhere else. If it is clicked on it should stop its new tween and go where it was supposed to go originally. My solution was to pause the original tween, save it in a variable in the object, make a new tween -- and then if the object is clicked to kill the new tween, grab the old tween and resume it. But it doesn't seem to work quite right. Thanks for any help. Just pointing me to the right part of the API would be fine. (Alternatively, of course, I could simply save the final destination and make an an entirely new tween to that place, but I was curious if the above would work)
-
Hello there again! I use TweenMax.set() to set properties like opacity and transform(x,y,rotate,scale(x,y)) for IE6-8, and it works like charm, everything is perfect! But I have one issues, which I don't know how to solve. The life cycle of my page: Set DOM values via MVC engine Wait until $(window).load() and then fadeIn() page Problem is TweenMax.set() executes on slow computers after load is complete and then user needs to wait like 2-3 seconds until element by element is positioned for him. Basically it look like mess. What I would want is to know when TweenMax actually sets the values and after that I show content to the user. Is it possible, has anyone ever had this problem? Sincerely, Masq
-
I didn't have much luck with my last post, and can't delete or change the topic. Here's something I'm having some trouble figuring out — and perhaps it's a start to solve my other questions: how would I tween an object in 3d space along another object in 3D space? The second object is rotated along its x-axis. I'm trying to understand how to get the dimensions of objects placed and rotated in z-space -- what their boundaries are, and where other objects are in relation to them. So, in the attached graphic, I'd like to pin a green square to a blue bar and move it up and down. How do I know where it is in relation to points along the rotated object's body? How do I know the distance to tween? In pseudocode: greenBox.x = blueBar.x; greenBox.y = blueBar.y; TweenMax.to(greenBox,1,{y:blueBar.y + blueBar.height, z:"some distance that is appropriate to the height I've tweened"}); This doesn't work. I am almost certainly approaching this wrong, but after some time spent poring through matrix3D's and perspectivePositions and the like, I feel I am simply missing some very obvious point — thanks for any help.
-
I need to animate a bunch of sprites (well, they're animals) within a rectangular (but not square) boundary. I'd like to move them around in a random, non-jittery fashion -- perhaps random bezier curves. I'm also keen to move the ones at the top back in the z-space, and those at the bottom nearer (I suppose I can simply do a loop through each time and map y coord to z coord). I found some nice Greensock code (posted at the bottom) that will move animals in a circular area, but I need to be able to move within an arbitrary rectangular area (again, of arbitrary ratio, not necessarily square). Is there any other similar code here that would work for that, or is there any easy way to modify this code to make it work (boundary checking? Sin's and cos's are not my forte tonight). Any help much appreciated! var xCenter:Number = 275; var yCenter:Number = 200; var poolRadius:Number = 200; function tweenFish():void { var angle:Number = Math.random() * Math.PI * 2; //random angle in radians var radius:Number = Math.random() * poolRadius; TweenLite.to(fish, 2, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter, ease:Quad.easeInOut, onComplete:tweenFish}); } tweenFish();
-
Hello, I am animating three divs according to three variables I request from a server: this.onload = function(){ var tldot = new TimelineMax({delay:0, repeat:-1}); tldot.add( TweenMax.to(".bgdot", <%= 1/windSpeed1 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tldash = new TimelineMax({delay:0, repeat:-1}); tldash.add( TweenMax.to(".bgwave", <%= 1/windSpeed2 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tlwave = new TimelineMax({delay:0, repeat:-1}); tlwave.add( TweenMax.to(".bgdash", <%= 1/windSpeed3 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); }; I am trying to make periodic server requests that will alter the speed of the animation according to the new values passed by the variables. I tried to do this manually by doing using tweenmax: window.setTimeout(function() { TweenMax.to(".bgdot", <%= windSpeed1 %>, {backgroundPosition:"-100px center", ease:Linear.easeNone, repeat:-1}); }, 5000); But since this affects an ongoing animation it makes a bump. Is there any way I can alter the speed and keep the flow of the loop? If so, how do I add it to the current TimelineMax I created? Thanks, João
-
I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?
