midimid

Just ran into this problem and here's what I did. 1) set my draggable to x,y with lockAxis: true. 2) onDrag function looks like this: onDrag: function(evt) { if (this.y !=0 && this.x == 0) { // user is moving vertically $(window).scrollTop($(window).scrollTop()-this.y); } else { // do your usual horizontal stuff } }, I'm basically using a draggable to scroll the webpage vertically, which is definitely a no-no, but it seems to perform OK and my particular page (a slideshow) is simple enough where it doesn't appear to be a problem. I tried messing around with disabling the draggable when the user scrolls vertically, but that requires the user to "retouch" a second time in order to move the page vertically, and there's no good way to detect when the interaction is complete and re-enable the draggable. i.e., once the user has touched the draggable, all interactivity is locked to greensock's JS - there's no way to pass that touch back to the browser natively (for instance, like "un"-preventing default).

When I throw a Draggable and then click it before it finishes, the snapping doesn't complete. Is there a setting I'm missing? the attached example is a typical slideshow, fixed at -100 to 100, three 100px images within a single '.slide' container. If I 'throw' the container and click it before the throw is complete, it doesn't complete the snap, the tween just stops. Draggable.create('.slide'),{ type:"x", lockAxis:true, zIndexBoost: false, cursor: "pointer", maxDuration: 0.5, throwResistance: 0, dragResistance: 0.5, edgeResistance: 0.9, bounds:{minX:-100, maxX:100}, throwProps: true, snap:{ x: function(endValue) { return Math.round(endValue / 100) * 100; } }, onClick: function(evt) { console.log('click!'); }, onDrag: function(evt) { fadeInOut(this.x); }, onThrowComplete: function(evt) { console.log('onThrowComplete') }, onThrowUpdate: function(evt) { fadeInOut(this.x); }, onDragEnd: function(evt) { console.log('onDragEnd'); } });

Thanks Carl. I have posted about this on the Raphael Google Groups, but without a response yet. Out of curiosity - how does TweenLite handle this when tweening in Actionscript? Is it purely that setViewBox works differently from animating in actionscript? I was playing with the idea of changing x,y vs. w,h properties at different times with delays, etc, but most of those experiments didn't look too good. The only thing I can think of is moving away from setViewBox and back to other methods found in previous versions of Raphael (i.e. transform and translate), but setViewBox is definitely the recommended way to "change" objects in Raphael as of the 2.x, so I'd rather stick with that and just live with the problem for now.

I've been loving this library and have been applying it to a pan/zoom project. I ran into a problem recently however and made up a simple JSFiddle to show it: http://jsfiddle.net/U2WLP/2/ In this project you can click on either of the two boxes, and you can drag to pan the raphael paper after zooming in. As recommended on this forum, I'm using TweenLite to simply tween some numbers (a set of to and from coordinates of x, y, width, and height) and applying them to a setViewBox with TweenLite's onUpdate. The problem I'm having is if you click from one box to the next. i.e. click on the bottom-most box, then click on the one directly above it. What happens is a weird zoom in first - then zoom out during the animation. This appears to only happen when the width/height ratio is drastically different. For instance, when the two objects clicked on have a width-greater-than-height, all looks fine. But when one object has a width greater than height, and the other object has a height greater than width, you see this weird zoom in first, then zoom out. Is there any way around this? Any thoughts?

Really appreciate everyone's feedback on this. I've managed to figure out everything that's going on and have things working the way I want them to. I think the biggest thing holding me up was doing "other stuff" while setting up a timeline sequence. For instance, I'll commonly want to do some tweens, then run some functions unrelated to animating (sometimes while animating is still going, sometimes pause animating for processing), then do some more tweens. And while those things should definitely be separate, its a lot easier to put it all into a single sequence where I can break down what comes after what. The solution was to append delayedCalls with a delay of zero or use mixed onCompeltes, but IMHO, both of those feel messy, especially when the timeline is being reused across multiple classes. Would be nice to see maybe an appendFunctionCall() or something. My biggest benefit here is the onComplete at the end of an entire timeline, where I can clean up, re-enable things that are interactive, bitmap cache, etc. Really simplifies my animation management! Just my $0.02 - cheers on a fabulous free product!

OK - so check out the attached. When you run this, timeline is null in ClassChild's fadeIn method. I was trying to "stop and clear" in the timelineComplete function (currently commented out), but I'm not sure if that's doing what I want it to do ("reset" the timeline). I also tried "new TimelineLite" there, but I thought that might be what was causing ClassChild to get a nulled timeline - like it was in the middle of recreating it or something. Try swapping lines 51 and 52. Using the latter, ClassChild's fadeIn function is never called. I suppose it might be because the playhead is not at zero? Again - this is a complicated way of asking how I do what I really need - a single reusable timeline between multiple classes. Interactions with the timeline generally are not as "fast" as this example in my particular project (i.e. delayedCall(0,fadeIn)), but I feel like my purpose is sound: setup a timeline sequence, play it - when its done, "reset" the timeline, setup another timeline sequence, play it, "reset" etc etc.

Considering the complexity of the project, no, but I'll definitely try to put something together for you. Being my first time using it, I'm sure I'm just doing something wrong here. Are you saying that when I do _timeline = new TimelineLite() that the playhead immediately begins to move, even when I haven't added anything to it? What I'd prefer is where I setup a sequence of tweens, do some other stuff, maybe add some more tweens later and then play that whole sequence when I'm done. I'm also trying to keep a single instance of Timeline by passing it along to other classes. This way any of them can add to the current timeline. Also allows other classes to see if something else is already tweening. i.e. not allowing interactivity until the animation is complete. Question - does Overwrite.init() affect anything with Timeline? OK - perhaps my stupidity, but in the docs, when I read "0.5 is half-speed, 2 is double speed" - I read "half" as the timeline taking "half as long" as the original timeline, and "double-speed" as the timeline taking "double" the length of the original timeline. I read it as being similar to a Tweenlite's duration - 0.5 is a tween twice as fast as a tween at 1. No biggie, it makes sense either way.

I'm trying to move my application to TimelineLite. Really need some better animation management and I think it'll work out great. My problem is the following: _timeline = new TimelineLite(); _timeline.insert(new TweenLite(this,0.5,{onComplete:initComplete})); function initComplete():void { trace("init"); } In the above, initComplete() never occurs. When I change the duration from 0.5 to 1, it works fine. I found that if I put it to anything lower than 0.8, it never takes. Also tried standard delayedCall() but get the exact same results. However, the following works fine: TweenLite.to(this,0.5,{onComplete:initComplete}); function initComplete():void { trace("init"); } And finally - just for kicks - if I do the following, initComplete runs, but the Timeline inserts within it don't occur: _timeline = new TimelineLite(); TweenLite.to(this,0.5,{onComplete:initComplete}); function initComplete():void { trace("init"); _timeline.insertMultiple([ TweenLite.delayedCall(1,obj1.fadeIn), TweenLite.delayedCall(1,obj2.fadeIn,[false]) ]); } And one last thing - TimelinLite.timeScale seems to work in the opposite direction. When changing to 1.2 the tween is faster than when its at 0.8. Any thoughts on all of this? Is this a bug?

I'm considering using LoaderMax for a crossplatform Flex Mobile project. Unfortunately in the mobile world, you have to be especially careful about memory and threads. What I'd like to do is after I've faded out an ImageLoader (managed by a LoaderMax queue) I want to completely remove it from the stage, but still have the ability to "reload" the image later on when its requested. In my own custom projects, I generally have an object that is nothing but data and I use addChild/removeChild to manage what data is on the stage at any one point in time. Its unclear to me how I can accomplish the same thing with LoaderMax because it seems to me that all objects loaded are always on the stage, and if I "unload" something, its gone forever. Is there something in between?

One thing I like about ContentDisplay is that its already a Sprite and I can use addChild with it and LoaerMax's organization capabilities are great. In the case of a slideshow app, I like being able to setup each of the ImageLoaders as "slides," add other elements to them, like text, borders, etc. Then when I'm animating, I don't have to separately animate all of the different elements - I only animate each of the ContentDisplay objects and call it a day. But now I'd like to do some more custom functionality with the ContentDisplay class and I'd like to create a class that extends it. How do I tell LoaderMax/ImageLoader to use my custom class?

One thing I've tried is to pause() and resume() the LoaderMax when tweening. The problem there however is it appears that the loader always restarts loading at zero bytes...

I have a process that looks to see if the first image of a long queue of LoaderMax is loaded. I have an imageCompleteHandler on the ImageLoader's complete event and check to see if that first, prioritized image is loaded. When it is, I immediately tween it while the other images are still loading in the background. None of the other images are tweened, just the one. It simply fades in alpha to 1 and tweens x the from the full width of the image to x=0. If I set the tween to something long, like two seconds, I can see quite a bit of jitter in the movement of the animation while the other images are loading in the background. If I remove the tweening of x, the animation is rather smooth and if I wait for all of the image to load (using LoaderMax's onComplete), the animation is smooth. Any thoughts on any way to make that animation smoother?