Search the Community

Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!

Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much

Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?

Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.

Hello all! So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear. I haven't really used TweenLite very much, and I have the TweenMax script in my document. So far my code looks like this: var omni = sym.getSymbol("omnibed_side"); var pos = omni.getPosition(); if (pos < '3000') { omni.play(); } else { omni.stop(); } I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated! -mlovett

Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?

I wonder if anyone else got this error on Firefox... NS_ERROR_FAILURE ColorWheel Bug It seems to be a combo of TweenMax and SVG in Firefox in Mac and Windows. Chrome looks correct. There should be two color wheels on the bottom of the screen. Pressing and releasing them should select colors.

Hi everyone, I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project. My require config is : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', }, shim: { Draggable: { deps: ['TweenMax'] } } }); It works like expected. But i have problem during the minification step with the r.js tool. The compiler looks for the TweenLite file, but doesn't find it. I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: 'TweenMax' } }); But now the error is that the TweenMax file is not found. If I do directly require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite' } }); it works as expected. But TweenLite is packaged two times (inside TweenMax + TweenLite directly) A workaround is exclude TweenLite with the compiler options. requirejs: { compile: { options: { paths:{ 'TweenLite':'empty:' } } } } I don’t know if there is a better way to fix the problem, but for the moment it works for me. Hope it helps. And I’m all ears if someone has a best solution.

I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.

function mouseOUT(e:MouseEvent):void{ TweenMax.to(menu_MAIN, 2, {rotation:"360", ease:Linear.easeNone, repeat:-1}); } function mouseOVER(e:MouseEvent):void{ TweenMax.killTweensOf(menu_MAIN);; } Hi guys, here is a little problem I have and cant figure out how to solve it say I have a clock hand @ 12 o'clock which rotates constantly until I MOUSE_OVER it, what I am trying to do is when I MOUSE_OVER it I want the clock hand to always stop @ 12 o'clock no mater when I MOUSE_OVER it. Thanks for your help in advance Steven

Quick question. I'm trying to use TweenMax to (smoothly) tween the borderColor property of my TLFTextField from one uint to another, and have had no luck so far. I can't quite figure out where to go from here: TweenMax.to(textField, 1, borderColor: ?? }); Any help would be appreciated. Thanks in advance! Jacob

Hi guys, so about a year ago i used teenmax v 1.12, and it worked fine. I updated to the latest version somehow the same code doesn't work anymore. Can someone point me to the new changes in the codes. Or maybe if my code is wrong. Thx. TweenMax.to($("#cover"), 5, {css:{alpha:0}}) The above is the code. If i replace v 1.14 to the old version, somehow it works. By the way i'm using this in adobe Air HTML.

Hi, Maybe I did smthng terribly wrong, but I think I found an issue in GSAP 1.14.2. play('label1') doesn't work correctly. If I use the GSAP version: beta 1.8.2 it does. Thank you! Grtz Dennis

Hello, I'm developing a banking app where users can transfer money, pay bills, etc. The app is entirely free to download, no ads or something like that. What license should I use? And do I need a bussiness license if the user is charged a little amount from the amount he want to transfer, like paypal. Thanks!

Hi all, Wonder if you could give me a workaround on this issue: On Homepage, have created cards that use Tweenmax to animate when user clicks on the cards, The cards overlay other cards when clicked. It all works fine, but when we test in browser (chrome, firefox, etc) with zoom activated ( ctrl + mouse wheel scroll ) which activates the browser zoom it breaks apart the animation. When the cards are clicked the cards which are meant to overlay the other cards dont show anymore. Sorry hope this makes sense. Would appreciate any help. Cheers

Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.

Hi, I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly? http://codepen.io/kaplan/pen/rmKzG Thanks, Dave

Using: TweenMax 1.14.1 The TweenMax docs say that setting TweenMax.defaultEase sets the default easing on TweenMax tweens. As far as I can tell, it doesn't work. Instead, it seems, I need to set TweenLite.defaultEase. (I've also noted that the default for TweenMax.defaultEase is undefined, but the default for TweenLite.defaultEase is Power1.easeOut.) It seems like this is a bug either in the docs or in the code.

Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.

TweenMax.to player, len * 2, { bezier: { values: pathValues }, onUpdateParams: ["{self}"] onUpdate: (val) -> console.log val } If pathValues is an array [{x: 0, y: 80}, {x: 100, y: 200}] , is there a way to check which value in a path is a current bezier segment? I have a character that should follow a path and I need it to look forward one step in path, in order to change its animation texture. Here's a demo: http://iccthedral.github.io/2014/10/10/PIXI-ex1.html - Right click on a tile moves the knight (or whatever) to that position.

var dial:Sprite; var radius:Number = 0; var angle:Number = 0; var angleConvert:Number = 180 / Math.PI; init(); function init():void { makeDial(); makeOrb(); } function onMove(e:MouseEvent):void { angle = Math.atan2(mouseY - dial.y, mouseX - dial.x); volumeMC.rotation = angleConvert * angle + 90; } function onOrbDown(e:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.addEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function onOrbUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove); stage.removeEventListener(MouseEvent.MOUSE_UP, onOrbUp); } function makeDial():void { dial = new Sprite(); var g:Graphics = dial.graphics; g.lineStyle(2, 0x333333); g.drawCircle(0, 0, radius); dial.x = 170; dial.y = 370; addChild(dial); } function makeOrb():void { volumeMC.buttonMode = volumeMC.useHandCursor = true; volumeMC.addEventListener(MouseEvent.MOUSE_DOWN, onOrbDown); } Hi I have a volumeMC dial that drags and drops great, but I want to use the rotation snap in tweenMax to make this better. All I want it to do is .... 1] drag rotate volumeMC around its own centre from 0-360deg in 10deg intervals. 2] to trace the current rotation value to I can adjust the sound. here is what I have that works but I don't like it ... hope someone can help Steven

Hi all, I've searched and searched to no avail for help with my problem. I need to be able to pause some animations while others continue to play. And then resume them again when needed. And this needs to be done with TweenMax (I cannot use TimelineMax). And AS2. Ideally, there would be an easy way to create a function that I pass the movieclip location & whether or not it should be paused. Something sort of like this? public function pauseMC (MC:MovieClip, State:Boolean):Void{ if (State){ MC.pause (); }else{ MC.resume (); } } Thanks for any help! -Zach

my code is below the TweenMax skew doesn't work when I add a second line of code altering the skew in waterSkew function. It works fine when the second line of the waterSkew function is not in there. import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([TransformMatrixPlugin]); //CHANTEL Timeline variables var cMoveTimeline:TimelineLite = new TimelineLite(); function init():void{ waterSkew(); cMove(); } function cMove():void{ cMoveTimeline.to(C,2,{x:166.9, y:479.55}); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}, "+=.15"); cMoveTimeline.to(C,1,{x:163.3, y:471.25, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:166.9, y:467.7, rotation:5}); cMoveTimeline.to(C,1,{x:166.9, y:479.55, rotation:-5}, "+=.25"); cMoveTimeline.to(C,1,{x:170.5, y:469.5, rotation:0}); } function waterSkew():void{ TweenMax.to(water, 8, {transformMatrix:{skewX:1, skewY:-1}}); TweenMax.from(water, 8, {transformMatrix:{skewX:1, skewY:1}}); } init();

I've created a few animations that run simultaneously along a bezier curve and stop at different points along the path by utilizing another Tween to control progress. Everything animates perfectly, but I keep getting the following error in my console: TypeError: a is undefined a._lazy = false; TweenMax.js (line 6097, col 6) Looking into the source it seems that this has something to do with the new "lazy" rendering feature released in 1.12.0 http://greensock.com/gsap-1-12-0 Any ideas as to what's going on here? Here is my code as it pertains to this issue (Only loading the TweenMax.js library): var trajectory_path = [ {x:0,y:0}, {x:0,y:-73.6},{x:-58.2,y:-133.2}, {x:-130,y:-133.2}, {x:-201.8,y:-133.2},{x:-260,y:-73.6}, {x:-260,y:0}, {x:-260,y:76},{x:-189.7,y:133.2}, {x:-117.9,y:133.2}, {x:-27,y:133.2},{x:58,y:51.6}, {x:58,y:-50}, {x:58,y:-151.6},{x:-13.7,y:-218.4}, {x:-100.6,y:-245.9}]; var rockets = $('.rocket'); var full_duration = 20; var full_progress = .9; var contest_progress = 1; // as float percentage rockets.each(function(i,rocket) { // Create tween on bezier curve var progress = parseFloat($(rocket).attr('data-progress')) * full_progress; // Get this from data attribute var duration = full_duration * contest_progress; // This should reflect the contest week and not the trajectory distance var t = TweenMax.to( rocket, full_duration, { bezier:{ type: 'cubic', values: trajectory_path, autoRotate: 90 }, paused:true, ease: Linear.easeNone, } ); // Animate TweenMax.to( t, duration, { progress: progress, ease: Linear.easeNone } ); });