caffrey75

Hi there, I was wondering if there was a solution to an issue we're having where we load an HTML page containing a Draggable interaction into an IFrame. While dragging an element, if a user moves their mouse pointer outside the bounds of the Iframe and releases, then moves their pointer back in again, the element being dragged becomes stuck to the mouse pointer and can only become unstuck with a click/release inside the IFrame. I tried loading https://greensock.com/draggable URL into the IFrame to see if I was missing something that Greensock had implemented to get round this, but the same thing happens with the GSAP Draggable example. Is there some simple measure we can take to prevent this, or are we stuck with it? Many thanks Codepen below: http://codepen.io/anon/pen/mVjyxv

No worries, Jack, your work and the support is so excellent (even for non club GS members) that bringing in GSAP was the first thing I requested we do after moving from Flash to Adobe Edge - and promoting something that I believe in comes easily We're in the e-learning biz so, as you can probably imagine, drag-and-drop quizzes are a pretty regular thing, so I was very excited to discover that you had created a Draggable utility. I'll happily give the latest version a try the very next time I need to create something Draggable and let you know how I get on. Making the move from Flash to HTML5 (Edge) has been a very frustrating, tough and angry process predominantly due to the vast inconsistencies that occur when testing content on different browsers and now across desktops and tablets, but you have definitely made life so much easier! Thanks for bearing the request in mind - hope you manage to implement it, but Draggable is still awesome even if you don't! All the best

Hi Jack, Been promoting Draggable around the office and the response has been extremely positive, even from the more cautious/sceptical. One piece of feedback that got returned was that it would be nice to have a boolean option that would cause Draggable objects to center themselves on the mouse-pointer/touch-finger when you start to drag them. I guess this would be possible for a future update? Apart from that, the general consensus was: 'this guy has thought of everything!' So grats

If you're doing something relatively simple (like circles and arcs on Canvas), you might just want to skip Raphael altogether and do it by scratch. I had to create a pie chart recently where the user would cause a 'slice' of the pie to appear by dragging (using GSAP's own Draggable of course), which involved some updating of the arc on the fly. I had to find a tutorial to help me construct the pie chart in the first place, before building in the rest. Here is the one I used, and you could certainly use TweenMax to create it over time: http://wickedlysmart.com/how-to-make-a-pie-chart-with-html5s-canvas/ Maybe it might help you out...

Ah fantastic, Jack, works like a dream! Thankyou

Hi there, Thanks for updating Draggable so quickly - works great in IE now My current problem is that I've got 5 DOM elements that are being made Draggable. I was hoping that I could call a function using onDragStart and by passing through the parameters [this.target], I would be able to manipulate the DOM element that is currently being dragged. However, whenever I console.log out this.target - no matter what DOM element is being dragged - the return is always the last draggable element (i.e. 'drag_5'). Whilst I understand that Draggable can consist of an array of draggable elements, is there any way that I can identify which element is currently being dragged by using either something like [this.target] or by spitting out its position in the Draggable array? Cheers in advance

No worries - awesome service as always

Hi Jack, Apologies if this has already been called to your attention, but just implemented some of the lovely 'Draggable' functionality into a piece of work and have come up with an issue that seems to be specific only to IE9 when a Draggable element is set to type: "rotation". It works great in everything else (including IE8). Not sure what's exactly going on, but the rotation functionality seems to be reversed and just acts strangely. At first I thought it was just me, but the same happens to the example dial at Great and useful utility though! Cheers

Thanks Carl, really neat couple of approaches there! Really appreciate you taking the time to explain. I'm off right now to put one into practice

Hehe, sorry Carl - old habits die hard, I've spent too many years working in Flash! Sorry - I meant label. I can't wait to show off the project I'm currently working on to you guys, the foundation is TimeLineMax and TweenMax etc, and I've really tried to make the most of all the awesome features (although I'm sure there are things that I could do better or streamline more etc) The question I had relates to a timeline which is made up as something similar below: $(this).data("mainTL", new TimelineMax({paused: true}); myTL = $(this).data("mainTL"); myTL.insert("in_start"); myTL.insert(TweenMax (etc etc), "in_start"); myTL.append("out_start"); myTL.insert(TweenMax (etc etc), "out_start"); myTL.append("out_end"); This is very simplified, but it's a Timeline that will be used with various DOM objects all of which might have various settings (some might play once, some might loop etc) The question relates to those that loop. For the ones that do not loop the code is quite simple: myTL.tweenFromTo("in_start", "out_end"{onStart: etc, onComplete: etc}) For the ones that do loop, I was hoping to be able to do something like: myTL.tweenFromTo("in_start", "out_end"{repeat: xNum}) However this does not seem to work and I was wondering if I was simply doing something wrong or misinterpreting how GSAP works etc Thanks in advance

Hi there, Still loving GSAP I was wondering if it's possible to command a timeline to tweenFromTo one frame to another and repeat itself. I can get all the onStart, onComplete etc to fire out callbacks, but if I stick a repeat: x in there it doesn't work. I've been playing with this engine for so long now, I feel like I should know this but experimenting hasn't produced anything.

Was really pleased when I came across this, as I'm having to define Easing as strings a lot of the time, although for some reason it isn't working for me. I always get - ReferenceError: EaseLookup is not defined - whenever I try to put it into action. I tried to get it to work in one of the example files (carousel.html), just in case my own files were missing something or had something in them that was interfering but no dice. TweenLite.fromTo(boxes[i], 1, {css:{marginTop:-500}}, {css:positions[boxes[i].attr("data-pos")], delay:i * 0.1 + 0.25, ease:EaseLookup.find("Elastic.easeOut")}); Same error as above, and EasePack.min. js is loaded in the header etc.

Thanks, Jack. At the moment I've gone about the whole process another way, but when I'm done I'll do what you've asked.

Thanks, Jack, simplifying code has never been my strong point. The more I try to simplify, the more trouble I seem to get into, although that doesn't stop me trying. I'm not sure whether I've run into a bug. It's probably not, just something I've done - to do with the invalidate() call. I've currently got quite a lot of messy code going on in my project, so I recreated the error I get using the simplified example you posted above. mainTL = new TimelineMax(); groupNames=[$('.as-s1'), $('.as-s2')]; for (var i = 0; i < groupNames.length; i++){ var group = groupNames[i]; var insertTime = mainTL.duration(); mainTL.insert( TweenMax.to(group, 2,{x:100}), insertTime ); } mainTL.invalidate(); Obviously I wouldn't be using invalidate() like in the above example, but I do need to have one of the Tweens revalidate some of the variables it starts with at some point. However, if I try invalidate() at any point it throws up this error in my console. Not sure quite what this means...

Wow, I think I might have worked out a method using a for loop and 2 arrays. var mainTL =new TimeLineMax; var timeLineArray=[]; for (var i=0; i<=numGroups; i++){ group=groupName[i]; var tempArray=[]; for (var ii=0; ii<=group[i].numObjects; ii++){ obj=group[i].obj[ii]; var newTween=TweenMax{group[i].obj[ii] blah blah}; tempArray.push(newTween); } timeLineArray[i]=new TimeLineMax; timeLineArray[i].appendMultiple(tempArray); mainTL.append(timeLineArray[i]); tempArray=[]; } That's just a rough truncated breakdown of what I did, but it actually seems to work - bar testing. Is this on the right sort of track?

Hey there, Well, had an interesting evening with TimelineLite and Max and watched quite a few tutorials. Typically I've got a bit stuck. I'm basically trying to accomplish something like Carl's BulletProof TL Max tutorial: http://www.snorkl.tv...or-forward-out/ However, where I'm stuck is that, rather than have an animation play/reverse/do something, it needs to do this at the same time as another animation is coming on the screen. These animations are made up of multiple TweenMaxed elements. So I figure that I need to insert and control animations inside separate Timelines and then nest those in the main Timeline. The second problem that crops up is that the number of 'animation groups' to insert into separate Timelines is totally arbitrary (could be 2, could be 10). Tried all sorts of things and looked at a lot of tutorials because I think each Timeline I need to nest will have to be unique and have a unique name and I can't think of a dynamic way of going about it in javascript. Maybe I need to go back to TweenMax for this, or is there an elegant solution in TimelineMax? Sorry for asking so many questions in one day

Many thanks, Jack - can't wait to get into this!

Edit: I just found a lot of the sort of stuff I'm after in TimelineLite docs. Apologies, I was only really looking in TimeLineMax and the links for insert(), append() didn't seem to work for me in that area.

Hey that's great news! Totally the opposite though, regarding my impression, I just sometimes can't believe that the whole engine could be any better than it is, but it never fails to surprise me! Are there any of the examples in the download that deal specifically with this type of thing? Sorry, that's being really lazy of me isn't it, but I do get a bit lost in docs sometimes

Thanks so much for the swift reply, Jack. Definitely answers the questions. I know some get a bit fussy about absolutely maxing out performance, but that's probably more coding-headache than I can be doing with and if the performance is neglible than no worries. Sorry, I've got another question to ask regarding TimelineLite/Max and if you feel it merits another thread, please move it. I was wondering if it was possible to build a dynamic Timeline on the fly? Let's say we've got an arbitrary bunch of objects, all with various properties relating to x/y/opacity/starting point and stuff... Is there any way of appending those into a New Timeline with tl.append() or something and being able to control it? Or is that a bit too much to ask?

Hi there, Just got a couple of questions about possible performance, maybe a bit obvious for the first one, but I've come pretty much directly from a Flash BG so I'm not really much of an expert with animations that aren't built in it. First question relates to animating in and out of a stage. Although I've got the stage css set to "overflow: hidden", I set up a function whereby each object that finishes its "out" animation would also also have its visibility then set to "hidden" and also its display set to "none". Is this good practice and will it help processing, especially where we have many different objects animating? Second question relates to the number of properties of an object I want to tween. Let's say I have just two main TweenMax instances: var TweenIn = TweenMax.fromTo ( etc ) and var TweenOut = TweenMax.fromTo ( etc ). The animation of objects is based on user-choice, they might want to animate its scale, position rotation, opacity etc - or maybe just a combination of a couple of properties. Can this potentially cause a hit on processing if I were to animate just the opacity, for example, but none of the other properties, so all of them would essentially be animating from: CurrentValue to CurrentValue. I haven't noticed any problems, but I'm running quite a fast system. Does that question make sense? Many thanks and - I'll probably always say this when posting - this product is just fantastic!

Thanks Jack

EDIT: Apologies, I cried for help too soon and found the answer. Seems it wasn't a curly bracket configuration issue, but the fact that I wasn't putting my values in quotes. The correct way should have been: TweenMax.fromTo($(".obj"), 1, {css: {left: "900", top: "300"}}, {css:{left:"0", top: "0"}});

Sorry this is probably a really newb question, but can somebody help with the correct syntax for tweening css properties using fromTo (or is this not possible)? TweenMax.fromTo($(".obj"),1,{css:{left:50, top: 10}, css{left:0, top: 50}}); I've been messing around adding and deleting curly brackets for ages, but the console just throws an error every time and I can't seem to find anything in documentation to give me a better clue. Thanks for any help in advance - GSAP really is an awesome work!

Thanks so much both of you by taking the time to reply at such length. Sorry about the difficult-to-read-code, Carl - it's messy I know I'm basically building my own Portfolio website, but because I'm a one-man army I'm doing it all myself (involving Flash, 3D Max, After Effects) and sometimes it feels like I'm trying to do too much - there is SOOO much still to do! Hence I probably tried to cut corners by NOT using the queueing functionality LoaderMax provides and prioritising each movie. I will now attempt to do it this way. You're right, Carl, I was using the same loader to load multiple swfs - here is the typical scenario. 1. User enters the site (which loads up using a SelfLoader) 2. Once SelfLoader has completed a SWFLoader is initiated which begins loading the first item in the Array by default (which is intro.swf) 3. intro.swf is a rolling video embedded in the main timeline with sound etc. It's about 3.5MB big and HAS to start playing before it's completely cached in. Kind of like a YouTube video. 4. User is obviously able to skip the intro and choose another of 3 options, which would all load in another page and the intro would be unloaded if this happens (about.swf, porfolio.swf, contact.swf) 5. THE PROBLEM: if (loadedSWF!=null) { trace ("1"); _loader.cancel(); //problem lies here whether I use dispose(true), cancel or whatever and throws the 1009 error. trace ("2"); maincontentMC.contentholderMC.loaderMC.removeChild(loadedSWF); trace ("3"); loadedSWF=null; trace ("4"); } var _loader:SWFLoader = new SWFLoader( pagesArray[pageToLoad].file, {auditSize:false, autoPlay:false, onProgress:_onLoaderProgress } ); trace ("5"); If I comment out _loader.cancel() and allow intro.swf to fully complete its load before trying to load anything else instead, then it will work. However, if I try to load something else in BEFORE intro.swf finished loading in full then (provided _loader.cancel isn't present) I won't the 1009 error, but intro.swf does not get removed and is still there playing, even with removeChild() (probably cos the SWFLoader hasn't finished with it), although the first frame has obviously been loaded. Thanks for offering to take a look at my Flash, guys, I might post a file up if I still experience problems after trying to do it the way you both suggested. The only thing of paramount importance is that intro.swf (and any other of the three other swfs) are ordered to play after a certain percentage of the file has been loaded in but only (with the exception of intro.swf) after a user has opted to view them. Just got to work out how to effect this in the code, so I think I'll be using the prioritise functionality of LoaderMax. I will also make sure the function isn't nested, Jack Thanks again guys, I don't know if the above has been a bit more enlightening as in what I'm trying to do. I'm not one of these that would ever say 'Pleeeease do it for me' because it's more rewarding to work it out myself, but if you have any further helpful comments or glaring errors to point out in my theory, please write. EDIT: I just realised while setting up the new system why the intro.swf DOESN'T get removed when using remove child. Immediately after it gets removed and loadedSWF gets set to null, the requirements of the if statement below are fulfilled and it just gets added again immediately and the whole thing breaks! *slaps forehead*. I think there are still glitches though, so working on setting LoaderMax more like you guys suggested though to avoid further mishaps if (loadedSWF == null && _loader.progress >= minPercentLoaded) { loadedSWF =_loader.rawContent as MovieClip; if (loadedSWF && !introLoaded) { introLoaded=true; maincontentMC.contentholderMC.loaderMC.addChild(loadedSWF);