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?