Phill

Nevermind, best answer here sorted it: http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits

Hello I'm using the following to count from 0 to 16000: function animValueThree() { TweenMax.to(countVal3, 5, {delay: 1.75, countThree:"+=10", roundProps:"countThree", onUpdate: updateThree, ease: easeInOut}); }; function updateThree() { $valueThree.html(countVal3.countThree); }; This works great, however, I was hoping I'd be able to use a comma so that the value was visually represented like this: 16,000 But so that it'd always be used like that for smaller values (1,000). Is there a way to do this? Thanks

The page will be live this Monday, I'll link it again then. I wouldn't say it's GSAP related either, but it still happens when using certain CSS transforms through GSAP. Attached is an image, the issue occurs any time the globe is spinning (using transform/translate) and the same for the dots (the dots are all divs with 50% border radius). Each individual dot moves 10px up and then it repeats infinitely. The globe uses an SVG image for the map. Again, I'll link it on Monday, perhaps I'm not animating these things the best way. The issue only goes away once both of these animations have their transforms set to 'none' Thanks

FYI the issue was on Chrome with Windows too, but it happens 100% of the time on OSX Chrome I have a ~30 second long timeline. I trigger a play and pause event depending on where you are on the page. If the animation is in view, it plays, if not, it pauses. I was having an issue where on the footer of my page certain elements would disappear for some unknown reason. So I did around 2 hours of figuring out what it was, and I narrowed it down to some CSS animations I left looping (unrelated to GSAP). That made sense, it was performance draining and so the browser started to glitch. So instead I tied this animation to my timeline and it worked even better than before... but the issue remained. Even when the timeline was paused, if the elements I was animating were stuck in a CSS transform in any way, elements on the page would disappear in Chrome OSX (100% of the time). I fixed it by adding a class that set transform to none when the timeline pauses, and removed it when it played. This was the only way I could fix it. I can't share the URL publicly, but I can post links to both versions via PM if it helps. My main questions in regards to this: Is this a known issue at all? If you animate dozens of things at once (in my case, dozens of 6x6 little squares), is it likely to cause issues, even if the browser isn't using much memory/CPU? It worked fine in every other browser. FF, Safari, IE, even IE9. Thanks

Any idea of why when I nest a timeline with timelinelite, nested timelines play when they're called, but with timelinemax, they play right away? It all relates to this code as tweento doesn't work with timelinelite, only timelinemax, so I'm not sure how to proceed :/ //Animation var tl1 = new TimelineMax(); tl1.to(animContainer, 0, {autoAlpha: 1}).call(pauseLine).addLabel("label1"); tl1.to(dottedLines, .5, {autoAlpha: 1}, .3).call(pauseLine).addLabel("label2"); var tl2 = new TimelineMax({repeat: -1}); tl2.to(dottedLines, 1, {rotation: "+=360", ease: easeNone}) var masterTimeline = new TimelineMax(); masterTimeline.add(tl1, 0) .add(tl2, 0.2); //Animation pause function pauseLine() { tl1.pause(); } //Jump to sections $("li.anim-step-one").on("tap", function (e) { e.preventDefault(); tl1.tweenTo("label1").duration(1); }); $("li.anim-step-two").on("tap", function (e) { e.preventDefault(); tl1.tweenTo("label2").duration(1); });

This seems to work. Is it really this simple? $("li.anim-step-one").on("tap", function (e) { e.preventDefault(); tl.tweenTo("label1").duration(.5); }); $("li.anim-step-two").on("tap", function (e) { e.preventDefault(); tl.tweenTo("label2").duration(.5); });

Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help

Hello I have the following code (which is a timeline within a timelime). The animation repeats 11 times. var stepTimer = .35; var bodyRotateTo = .6; bodyBounce.fromTo($car, stepTimer, {y: "+=2", rotation: bodyRotateTo, ease: easeInOut}, {y: "-=2", rotation: .3, ease: easeInOut}); What I'm trying to do is change the speed (or stepTimer) as it plays. I want the animation to happen every .35 seconds, and after each repeat increase by .1 of a second. After it hits a certain point I then want it to decrease to it's original speed. I have no idea how to implement this. I thought I could call a function onComplete to handle it, but that didn't work. Any ideas? It has to be set up like this because it's in a timeline. Thanks

Nobody ever needs to do this?

Hello I want to animate a movieclip, this movieclip will animate when I click it. button.addEventListener(MouseEvent.MOUSE_DOWN, pickup); function pickup(event:MouseEvent):void { button.startDrag(); TweenLite.to(button, .3, {scaleX:1, scaleY:1}); } So when button is clicked, it starts being dragged. What I want now is for it to rotate 60 degrees to the left, then to the right, then the left and so on, alternating between the two till I release my mouse. What I would normally do is call a function that spins it one way, then onComplete call the other function to spin it the other way with another onComplete calling the first function again. Is there a way to do this in a single line using Tweenlite? Kind of like how you would do it using timelinemax - but not. Thanks

NVM I got it. import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.Physics2DPlugin; TweenPlugin.activate([Physics2DPlugin]); //activation is permanent in the SWF, so this line only needs to be run once. for (var i:int = 0; i < 500; i++) { tweenDot(getNewDot(), getRandom(0, 3)); } function tweenDot(dot:MovieClip, delay:Number=0):void { dot.x = 0; dot.y = 0; TweenLite.to(dot, 1, {physics2D:{velocity:getRandom(100, 400), angle:getRandom(190, 170), gravity:500}, delay:delay, onComplete:tweenDot, onCompleteParams:[dot, 0]}); } function getNewDot():MovieClip { var e = new Example(); addChild(e); tweenDot(e); return e; } function getRandom(min:Number, max:Number):Number { return min + (Math.random() * (max - min)); }

Basically I bought Greensock to use this one Phsyics tool to create a rain animation that loops, that part is easy, but getting this to work is beyond me. import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.Physics2DPlugin; TweenPlugin.activate([Physics2DPlugin]); //activation is permanent in the SWF, so this line only needs to be run once. for (var i:int = 0; i < 150; i++) { tweenDot(getNewDot(), getRandom(0, 3)); } function tweenDot(dot:MovieClip, delay:Number):void { dot.x = 0; dot.y = 0; TweenLite.to(dot, 1, {physics2D:{velocity:getRandom(100, 400), angle:getRandom(190, 170), gravity:500}, delay:delay, onComplete:tweenDot, onCompleteParams:[dot, 0]}); } function getNewDot():MovieClip { return testClass(); } function getRandom(min:Number, max:Number):Number { return min + (Math.random() * (max - min)); } Should that not work? Can someone provide me with working code at all that replaces the dots with a movieclip? Is there any pages / topics that have snippets for things like this that are pre built? Thank you

Should this not be working? import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.Physics2DPlugin; TweenPlugin.activate([Physics2DPlugin]); //activation is permanent in the SWF, so this line only needs to be run once. for (var i:int = 0; i < 150; i++) { tweenDot(getNewDot(), getRandom(0, 3)); } function tweenDot(dot:Shape, delay:Number):void { dot.x = 0; dot.y = 0; TweenLite.to(dot, 1, {physics2D:{velocity:getRandom(100, 400), angle:getRandom(190, 170), gravity:500}, delay:delay, onComplete:tweenDot, onCompleteParams:[dot, 0]}); } function getNewDot() { testClass(); } function getRandom(min:Number, max:Number):Number { return min + (Math.random() * (max - min)); } I set up a custom class as I read in another post here, but I don't think I'm implementing it properly. I get this error: Can someone help me out? I'm pretty new to AS3 as well.