Search the Community
Showing results for tags 'tweenmax'.
Found 627 results
-
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
-
THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );
-
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?
-
var tm = new TimelineMax(); var bgTween = new TweenMax(); var barWidthTween = new TweenMax(); var groupCount = 4; var clickCount = 0; var animationTime = 5; // seconds var targetSelector = '#statusBar'; var splitTime = animationTime / groupCount; //1.25 second jQuery('#target').click(function(){ clickCount++; // this will basically eval to 25%, 50%, 75% & 100% var animWidth = ((100/groupCount)*clickCount); switch( clickCount ){ case 1: tm.add([ bgTween.to(jQuery(targetSelector),animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}), barWidthTween.to(jQuery(targetSelector),splitTime ,{width:animWidth+"%", onComplete: pauseAnimation}) ],0,0); break; default: // presumes first click/case has already been met (this is the part thats not working) tm.append( barWidthTween.to(jQuery(targetSelector), splitTime,{width:animWidth+"%", onComplete: pauseAnimation}) ); break; } }); Note: var "barWidthTween" has a callback after the 1.25 second execution to pause the whole timeline before the var "bgTween" has finished. [ it should still have another 3.75 sec's left ] "WHAT IM TRYING TO ACHIEVE" A colour bar that changes colour over a 5 second period, while that same bar increases in size on every click. "hense the need for the pause every 1.25 seconds" I need to be able to reverse this motion also which is why im not using multiple TimelineMax instances. I hope I've made my problem clear and if not, i'll try and add some clarity.
-
This hardly seems like the most efficient or even correct way to do something simple like this, but it's the only way I've been able to get to actually work. Just a simple color change boxShadow animation whenever you click anywhere in the window. I haven't changed the autowrite method, so it should default to auto. Yet whenever I try to overwrite these tweens, the boxShadow gets a halo of the other color. Also I have to pause and seek back to the begining or I also see a halo. It has these problems whether I'm using a single tween or two. It doesn't seem right that I should have to create two tweens, pause one, then to change it I have to pause the active, seek it, then resume the other. What's going on here? Here's the only working example I've found, testing in Firefox: var status = $('#tablet-status') var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, yoyo:true, repeat:-1}) var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1}) $(window).mousedown(function(){ status.css('background-color','green') unclickStatus.pause() .seek(0) clickStatus.resume() }) $(window).mouseup(function(){ status.css('background-color','blue') clickStatus.pause() .seek(0) unclickStatus.resume() })
-
Im using superscrollorama on one part of my website, that works fine, but I want to implement a different animation further down, but it just wont work! Please have a look, NB it is still early in developement, so try not be too harsh The About us/Testimonials works fine, but it wont work on Services/Portfolio. I replicated the About us code exactly, but it still wont work! Here is the site http://vertex3.vertexwebdesign.co.za/ And here is my code http://pastebin.com/e4Ax5d0F please guys, going mad! Javascript isnt my forte, but trying my best here!
-
Hello everybody, I am a completly new EdgeUser. I am more familiar with AfterEffects, but I can imagine the things you can do with a tool like edge. I used flash for several years but more like copy and paste (AS2). What I am looking for is basically very easy, but not for me. I searched and searched but I cant found the solution for: get the parent symbol an do some tweening with tweenMax: TweenMax.to(sym.$("jacket01"),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut}); //I am currently inside an element named ("menue"), from here I want to tween a Symbol named ("jacket01") which is on the stage. I tryed a lot of things but nothing realy worked: TweenMax.to(sym.$("jacket01").parent(),2,{css:{y:-220, scale:0.4, opacity: 1}, delay:9, ease:Expo.easeOut}); I cant find the answer to such a simple question. I would be great if there is someone of your professional coders could give me an answer. It would be very helpful to dive in the new edge tool. Thank you very, very much in advance from germany P.S. This is my first result with adobe Edge: fake-RangeRover_site all done with edge: http://go-motion.net/range03
-
Hi, I have a grid of 6 boxes. I'm trying to get it so that when you click on a box it scales up and centres itself in the middle of the parent div. Here is what I have so far: http://codepen.io/hrk/pen/yJIBn I think I can get the current position of the box using .offset() I'm fairly new to JS and tweenMax - Can anyone point me in the right direction? Thanks Neil
-
Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip
-
Hi I'm new to Tweenlite, have a query that may be very simple. I have a tween thats repeating an object being rotated 360degrees, I want to update the tween so it eases out to a new degree requirement e.g. from... thisTween = new TweenMax(rec, 4, {rotation:"360", ease:Linear.easeNone, repeat:-1 }); to {rotation:"25", ease:Linear.easeNone, repeat:0 }); so it basically eases the objects rotation, stopping at 25 degrees. Spent the last hour trying to solve this, nothing so far. Any help greatly appreciated. Many thanks.
-
Big thank you to everyone that makes this forum such a huge asset. I'm having an issue with a Kiosk I'm working on. Basically i've built it with each "slide" on its own flash timeline frame. For each flash timeline frame I have a GS timelineMax to make everything awesome. My issue is that when jumping to the next flash frame I get a momentary "flash" or blink of the content that is set to animate .from. it quickly goes away but is really unsightly. here's an excerpt. any help would be greatly appreciated. var timeline1:TimelineLite = new TimelineMax({ onComplete:goToTwo}); timeline1.append( TweenMax.from(FR1.MFPS, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: 1})); timeline1.append( TweenMax.from(FR1.p1, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.Ba, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.p2, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.ser, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.equals, 1,{scrollRect:{x:0, y:0, width:0, height:140}, ease:Expo.easeInOut, delay: 0 })); function goToTwo(){ this.gotoAndStop(2); } stop();
-
Hi i want to achieve a scrolling parallax background, with layers in front using greensock Tween Max is there a starting script i can use? Or can anyone help me with best way to do this. regards WL
-
Hi, Can someone help me with this? I want it so when you roll over #box the tooltip (or ball in this case) appears and follows the mouse. When you roll out of #box the tooltip will fade away. This is where I am so far: http://codepen.io/hrk/pen/IguFo Any ideas on how to do this? Thanks
-
Hi, I am new to Tweenmax and tweenlite. I hv heard that its lighter and faster. So, I thought I should use them in my project where I am currently using fl.tranistions I am developing my project in flashdevelop. But before using tweenmax in my main file I tried it on a small swf which I will import later on my main swf. When I was using fl transition package I had to import three classes import fl.transition.tween import fl.transition.easings*; import fl.transition.tweenEvent; and the generated swf file size was 6kb Later when I replaced fl transition with just one line of code import com.greensock.TweenMax and then the generated swf file became 38kb But the loading time for both files is almost same fl.transtion loads in 9sec and tweenmax loades in 11 sec. AstionScript 3. I am using gprs connection (200kbps) tweenmax fl.transition test.zip
-
Hi, I'm new to TweenMax and was trying to achieve the following: I have a movieclip that move from left to right. What I want is that during the animation, to have a blur effect that kind of "fade in" and "fade out" on the beginning and end of the animation. Right now I'm able to blur my mc but I have problem with the "fade" parts. TweenMax.to(row_1, 8, { x:String(newX), blurFilter:{ blurX:40, remove:true } }); Can someone help me figuring out how to fade the blur effect with a sample or a tutorial. Thanks alot
-
I'm having an issue with Animating alpha PNGs in TweenMax JS in IE8, there is a lot of distortion during the animation but after it is complete the PNGs return to a normal state. I know IE8 inherently has issues with PNGs but is there a work around for this in TweenMax?
-
I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
-
As an erstwhile AS3 developer moving over to some JS, could someone clarify this for me? I was trying to move a div on screen and then (when invisible) set it back to where it started. Something like this (swapOut is a JQuery object): TweenMax.to(swapOut,0.4,{css:{x,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('x')]}); But I could never get it set back where I wanted? See the obvious error: I'm using 'x' instead of 'left'. When I inspected in Firebug I saw that my div's css had a transform-matrix set on it. When I went back and did this, all worked fine TweenMax.to(swapOut,0.4,{css:{left,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('left')]}); My question is: what's TweenMax doing for me with respect to x? Is this a proper CSS property? — or is TweenMax lending a helpful hand for us AS3 people and moving stuff in a tricky way when we (mistakenly) say 'x'? If so, what else is like this in the JS version? ("y" -> "top", etc?)
-
Hi, I wonder if we will have bezier support in javascript version soon? I had a great success with greensock and easelJs together, I can almost 100% duplicate what I have done with actionscript 3 before, apart from bezier curve animation...
-
I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work. I'm trying to use the old 'make a UL inline for a horizontal menu' trick -- I ran through all of these options but couldn't get any to work 1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other. 2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline' The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful. Thanks!
-
Adding autorotate to my bezier curve stops it from working in Safari (5.1.7) It just pins around in one spot and doesn't follow the curve. Removing the auto rotate parameter fixes it. Anyone any ideas?! Can't find anyone with this problem and not sure what to do about it, I really need it to auto rotate with the curve. Works in all other browsers! var anim = new TimelineMax(); anim.append(TweenMax.to($('#anim'), 2, {css:{bezier: {values: [{left:'3578px', top:'2417px'},{left:'3431px', top:'2362px'},{left:'3190px', top:'2252px'}], autoRotate: true}}, ease: Linear.easeNone}));
-
Hi everyone, I'm new on this forum, first thanks to Greensock for the awesome library. But... I have a serious problem with the timelineMax. What i want to do: - declare 2 or more timelineMax's with tweens on the same target - calls multiple times in a short time the gotoAndStop method on a (random) timeline. - the latest gotoAndStop must overwrite every other tweens or timelines. The problem is that mostly the latest timelineMax.gotoAndStop is not set. You can see a simple example of my problem in my attachment. Just publish the fla with and without the comments on line 22 to 32. The result should by the same... but it isn't. Can someone help me with that? (I'm sorry for my bad English) Thank you, Pieter example.zip
