Search the Community
Showing results for tags 'tweenmax'.
-
Hello, Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property. start(); function start(){ TweenMax.to($(img), 4, { css:{ scale:'+=0.5' }, ease: Power0.easeInOut, onComplete: function(){ start(); } }); } I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom). Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely. Any help will be highly appreciated! Thank You!
-
I want to slide each element in my div one after the other having some pause after each item slides. Below is my code attached. $(function () { $('.tick').each(function () { var $self = $(this); var t1 = new TimelineLite(); t1.to($self, .5, { x: 100, ease: Cubic.easeInOut }); t1.pause(); t1.resume(); }); what it does is: It slides all the items at a time. Why isn't it pausing after each item slides... What is the issue in the code? Thanks & Regards, Bunnie
-
Hi I wondering if anyone could help me. So my animation starts with: TweenMax.to(text_mc, 1, {y:30, ease:Bounce.easeOut}); So some text drops down, I would like for my image of a coin to produce about 30 copies of itself bounce upwards then down. The effect can be seen in the swf attached Cheers
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
-
Hi, How can I get the actual width of an element after scaling it with Tweenmax? Example: $('#myDiv').width(100); // Sets width of #myDiv to 100; TweenMax.set($('#myDiv'), {scale:1.2}); console.log($('#myDiv').width()); // gives 100 instead of 120 How can I get the actual width of the div? Thanks a lot in advance, this thing is frustrating me and breaking my head today...
-
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
-
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 -
I'm trying to plug this into my custom framework before I pull the trigger on a commercial licence and I might be asking a super noob question but I have looked through a bit of the documentation and from what I can tell there is no way of manually updating a tween through a external function. bool = true; TweenLite.to(someMC, frameCount, {useFrames:true, updateOnFunction:updateTween, onComplete:tweenComplete}); public function render():void { if(bool) updateTween(); } public function tweenComplete():void { bool = false; } I'm sure I can program some roundabout way to get this to work but I am hoping I am simply blind Xp
-
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…
-
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
-
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!
-
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?
-
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.
-
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'.
-
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 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)
