4foot30

Thanks for your help, this looks fine now with the latest version (I wasn't using the CDN at all). Thanks, Gareth

Hello all, I've broken this down as simply as I can but I'm sure I'm missing something simple: TweenLite.fromTo(spacer, 1, {height:0}, {height:100, onComplete:function() { console.log('full height'); TweenLite.from(spacer, 1, {height:200, onComplete:function() { console.log('double height'); }}); }}); The first tween finishes, but then both onComplete functions fire. Then the second tween finishes and the second onComplete fires again. So the output is: full height full height double height I'm sure I'm missing something blindingly obvious here! I've tried onCompleteScope set to 'this', and assorted other ideas but no joy. If I change to the second tween to be a to() not a from() then it's fine. Any ideas why the second onComplete is firing twice? Many thanks, Gareth

Hello - thanks for your help both, this is brilliant. You've nailed it - there's nothing wrong with the code, Firebug simply wasn't updating fast enough to show me that the new class was there. At the time I posted, I had only added the add/remove class code, which didn't appear to be working. When I wrapped all that in more code to actually stop the scrolling function from executing when the button(s) had a class of "scrolling" it all worked perfectly. Thanks again, Gareth

Hello, I've run into a strange problem with Tweenlite beta 1.9.0 and jQuery 1.9.1, so far only in Firefox (fine in Chrome). Given this: nextButton.addClass('scrolling'); // Kill any running scrolling animation TweenLite.killTweensOf($('#thumbnails')); // Tween to new target position TweenLite.to($('#thumbnails'), 1, {marginLeft:targetPosition, ease:Power1.easeInOut, onComplete:function() { // Remove scrolling class so the button can be clicked again (if it's not disabled) nextButton.removeClass('scrolling'); }}); ...I've found that in Firefox the class 'scrolling' is only being added to nextButton when the tween finishes - nothing happens before the tween starts. I've tried the above code as well as trying to add the class in the tween onStart function - same problem. Strangely if I increase the duration of the tween to about 2 seconds, the problem goes away and the class is applied when it should be. If anyone has any thoughts I'd appreciate it, I assume I'm just doing something stupid... Thanks! Gareth J

Thanks for the help everyone, I'm packing the code with trace actions now but I can't reproduce the error often enough to make them fire! If I work it out I'll post what was wrong! Thanks again, Gareth

Hello all, I'm tinting various movieClips etc. with code like: TweenMax.to(clip,duration,{tint:hexValue, ease:linear.easeNone}); But on some occasions the movieClip is turning completely black. I'm guessing that this is down to attempting to remove a tint from a movieClip that doesn't yet have a tint (my timings are misfiring I think). Can anyone shed any light on this, or perhaps tell me if there's a way to detect if an object has a tint before trying to run the tint removal code on it? I can't find anything in the docs regarding this. Many thanks, Gareth Jones

Hello, I got it working - massive thanks for taking the time to help. All hail roundProps as well!!! I had to adapt your code a bit to fit what my layout was doing, but here it is in AS2 (thumbnails_holder is the strip of thumbnails, thumbnails_mask is the viewable area): _root.ratio = 0; _root.destinationX = _root.button_select._x; _root._destinationX = _root.thumbnails_holder._x; _root.maxSpeed = 15; // Set the scrolling trigger areas to be a multiple of the number of columns, unless you have one column if (_root.thumbnails_mask._width > 396) { _root.activePixels = (198 * (Math.floor((_root.thumbnails_mask._width / 2) / 198)) - 25); } else { _root.activePixels = 50; } // Start scrolling the grid if needed if (_root.thumbnails_holder._width > _root.thumbnails_mask._width) { _root.onEnterFrame = function() { _root.scrollGrid(); }; } function scrollGrid() { // If the mouse is inside the scrollable area: if (_root._ymouse > _root.nav._y + _root.nav._height && _root._ymouse < _root.footer._y - _root.footer._height) { var _leftEdge:Number = _root.thumbnails_mask._x; var _rightEdge:Number = _root.thumbnails_mask._x + _root.thumbnails_mask._width; var _maxScrollX:Number = _leftEdge; var _minScrollX:Number = _rightEdge - _root.thumbnails_holder._width; if (_root._xmouse < _leftEdge + _root.activePixels) { // Scroll left _root.ratio = ((_leftEdge + _root.activePixels) - _root._xmouse) / _root.activePixels; _root.destinationX = _root._destinationX + _root.maxSpeed * _root.ratio; if (_root.destinationX > _maxScrollX) { _root.destinationX = _maxScrollX; } } else if (_root._xmouse > _rightEdge - _root.activePixels) { // Scroll right _root.ratio = 1 - ((_rightEdge - _root._xmouse) / _root.activePixels); _root.destinationX = _root._destinationX - _root.maxSpeed * _root.ratio; if (_root.destinationX < _minScrollX) { _root.destinationX = _minScrollX; } } if (_root.destinationX != _root._destinationX) { _root._destinationX = _root.destinationX; // Add a slower tween if you're about to hit either edge if (_root.destinationX != _maxScrollX && _root.destinationX != _minScrollX) { TweenMax.to(_root.thumbnails_holder,1,{_x:_root.destinationX, ease:Strong.easeOut, roundProps:["_x"]}); } else { TweenMax.to(_root.thumbnails_holder,1.5,{_x:_root.destinationX, ease:Strong.easeOut, roundProps:["_x"]}); } } } }

Thanks very much for the reply - I didn't expect one so soon! I had sort of implemented what you've suggested - it nows runs onEnterFrame, using a maxSpeed variable. The thumbnails are moved on enterframe by a percentage of the maxSpeed variable: -100% for mouse all the way left, 0% for a centred mouse and 100% for mouse all the way left. So: thumbs_mc._x -= maxSpeed * mouse_percentage; The trouble is I can't work out a way to link this to a tween so I can use easing. I've got the thumbnails moving, and speeding up or slowing down based on how near your mouse is to the extreme left/right. The trouble is this movement is happening onEnterframe, so it is constantly occuring. The only way to stop the movement is to centre your mouse, or to let the thumbnails scroll to either edge (which stops them dead, instead of easing towards the edge). I'm unsure of how to work out the destinationX value that you're suggesting and then tween to that point - how can I avoid the same problem as before, which is that a tween over a longer distance in the same amount of time will appear to move much faster? Once again thanks for your help, Gareth Jones

Hello all, I'm trying to do some scrolling using AS2 and TweenLite/Max, which is a godsend!... I'm doing mouse-based scrolling, pretty standard stuff - when your mouse is all the way left, scroll a strip of thumbnails all the way right and vice-versa. I'm doing this by using percentages - if mouse is 100% to the left, thumbnails should tween to 100% right and so on. This is working, but the number of thumbnails can vary, meaning that to get from one side to the other the speed could vary in order to complete the tween animation in the same amount of time. Therefore more thumbnails equals faster movement and a mouse control system that's too fast for the user to actually settle on any one thumbnail. My question is: is there any way with TweenMax/Lite to do the tween, but limit the speed at which the thumbnails strip moves along the x-axis? E.g. work out that the x value is changing too fast, cap it off, and then change the duration of the tween so that the x value continues to change smoothly but the tween takes longer to finish? I haven't found anything in the docs or forums that might help with this. Any help much appreciated, Thanks, Gareth Jones