Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenmax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. 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?
  2. 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.
  3. 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() })
  4. 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!
  5. 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
  6. 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
  7. 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
  8. 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.
  9. 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();
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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?
  15. 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!
  16. 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?)
  17. Alan

    bezier in javascript

    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...
  18. 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!
  19. 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}));
  20. 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
  21. Hello, I have TimelineMax with multiple instance of TweenMax on it. One of the instances has onComplete that calls itself. I need that to simulate random movements. When I pause TimelineMax everything gets paused except the TweenMax that has onComplete. I kind of get why it is happening but is there way to pause onComplete call? Thanks
  22. Hey folks, maybe it's that I am blind, or just an idiot, but how can I get the moment when the last element of the (staggerTo) array starts tweening? I tried getTweensOf and all kinds of workarounds, but I failed My example: TweenMax.staggerTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown, onCompleteParams:["{self}"]}, stepStaggerAmount); Sorry if that's a dumb question, but I tried stuff for hours now and cant get it. TIA, Lasercode
  23. Hi all! First off thanks for everything...! So... I have created a "Player" class which extends MovieClip and contains an array of F4V files being loaded via LoaderMax.parse ... In my Main Document Class (Main) I want to transform properties of the entire Player class (alpha, scale, etc.) however the F4V does not see the transformations....It seems I have to reference the content directly within the Main class. For example, if i simply try to set player.visible=false, after i've already added video content to the stage, It does not stick, but if I reference player.video.content.visible=false, it works... What I'm really trying to do is fade the player object out before I navigate back to a main navigation screen. I can fade each video.content individually but I'd rather just write one tween that effects the whole class. Am I missing something simple or is this larger than I think? ...additionally, these transformations DO work with NetStream driving the f4vs. But looping w netStream is ugly , as we know. Thanks!
  24. Hi folks, I am not really new to this, but I get a hard time trying to do the following: I got an array of MCs named "stepArray". I want to animate through it after a dice function which gives me a number between 1 and 6 (if 5, the stepArray will have 5 elements and so on). Whatever, I need to know when the last element of the array has finished tweening, because that is the time the dice can be used again and is set free. If you need more input, please reply. function animatePlayerMove ():void { tweenScaleUp(); } function tweenScaleUp():void { TweenMax.allTo(stepArray, tweenSpeed, {alpha:1, scaleX:1.5, scaleY:1.5, dropShadowFilter:{blurX:15, blurY:15, distance:5, alpha:0.33}, ease:Cubic.easeInOut, onComplete:tweenScaleDown}, stepStaggerAmount); } function tweenScaleDown():void { tma = TweenMax.allTo(stepArray, 0.2, {alpha:1, scaleX:1, scaleY:1, dropShadowFilter:{blurX:5, blurY:5, distance:5, alpha:0.33}, ease:Cubic.easeInOut}, stepStaggerAmount); addEventListener(Event.ENTER_FRAME, checkStepAnimationprogress); } function checkStepAnimationprogress (e:Event):void { if(tma[tma.length-1].currentProgress == 1){ //This doesnt work properly even with totalProgress trace("STEP ANIMATION ENDS HERE"); removeEventListener(Event.ENTER_FRAME, checkStepAnimationprogress); activateDice(); } } Obviously there is some mistake in my logics and I hope someone here will help. TIA, Lasercode
  25. Hi Guys, I seem to have a problem with the tweenMax.updateTo method. Given this sample code: _tween = new TweenMax(myMc,2,{rotation:360,repeat:-1,onUpdate:onUpd, ease:Linear.easeNone}); function onUpd():void{ if(_stop){ _tween.updateTo({repeat:1,rotation:_angleToStop, onComplete:onF},true); } } I am expecting the _tween to update 1. its rotation value to the predetermined value in _angleToStop 2, repeat count to change from infinity (-1) to 1 3. for it to call the onComplete method once that 1 rotation is done, where it stops in the correct value; What actually happens is the spinning starts to slow down as i would expect as it is reaching the target value however it then start animating again... Its like the repeat is not working.. Could anyone help me? Seems weird. Thanks, Bynho
×