OSUblake

You should also check out some of these examples created by Chrysto Demo 1: http://codepen.io/bassta/pen/kDvmC Demo 2: http://codepen.io/bassta/pen/eIyrd Demo 3: http://codepen.io/bassta/pen/cJgkw

@mikatalk has created a jQuery plugin of my CodePen. Awesome! Demo: http://mikatalk.github.io/jquery-plugin-list/ Repo: https://github.com/mikatalk/jquery-plugin-list

For your events to go through, use allowEventDefault. Draggable.create(card, { allowEventDefault: true }); http://codepen.io/osublake/pen/gpMeQG I've had problems in the past enabling Draggables with jQuery events. Usually unwrapping the event with event.originalEvent fixes the problem. If that doesn't work, check out this version of a draggable that can also rotate. http://codepen.io/osublake/pen/RNZxJx

To do what Jack is talking about, add this right below the _gsScope var. var _gsScope = (typeof(module)...; // ADD THIS _gsScope.GreenSockGlobals = {}; Now the GreenSock classes will no longer be global. require("gsap"); console.log("SAME: ", global === GreenSockGlobals); // false

Good links. This thread and demo might also be helpful. http://codepen.io/osublake/pen/vExQEy

If you are using ngRepeat, you don't mess with the node positions. You change your model, and Angular will reorder the elements. The model ngRepeat is using is probably an array, so you can use something like this to update your array... myArray.splice(toIndex, 0, myArray.splice(fromIndex, 1)[0]); This will place your elements in the correct order, but because they are positioned absolutely, they will visually be in the same place before you updated your model. Now you have to run some logic to put them in the correct order visually, which can be done a lot of different ways. The main thing is that they are now in the correct order with the correct $index, so you can run them through a loop, setup some $watch expressions, or $broadcast an event to get your directives to animate moving to a new position. For example, if your elements are 100px wide with no gutter space, and an element's $index is 3, you would place it at x = 300.

Are you still using Angular for this? The inserting of DOM elements isn't strictly necessary. That demo was converted from Angular, which automatically does that in an ng-repeat. Angular also sets a new $index on each element, which I used to figure out where to move an element. Once everything in the DOM is in the correct order, you can run all the elements through a loop to position them correctly. This assumes that all the elements are positioned absolutely from the same origin.

Just out of curiosity, how interconnected are color and the CSSPlugin? Would modifying the colorPropsPlugin with CSS propNames cause problems?

Forgot to mention, that it also helps to determine the user's intent before trying to move a box. I had to manually calculate that in the sortable demo, but now Draggable includes getDirection to determine the direction you are dragging. You can use this feature to prevent triggering a move in the wrong direction, which can happen when you're moving elements to a new position.

That's the correct behavior. Your hit test is going to be updating the values while the two boxes are moving past each other. You're going to have to add in some logic to not do a hit a test on a box that is moving, like flagging the element with a certain class name.

If you have ever wondered why tweening a color can display some odd colors or flashing, you need to check out the video in Erik's link. It's very interesting, showing how everybody is doing it wrong, including image experts like Adobe. As the video shows, the fix is real easy. I just used the imprecise method found on Wikipedia to get the colors to tween like p5. I have the animation set to repeat, which makes the color problem really noticeable, especially when going back to red. It turns a nasty brown with a bright flash at the end. // Value between 0-1 that GSAP sets var amount = Math.max(Math.min(amount, 1), 0); var rgb1 = [255,0,0]; var rgb2 = [0,255,0]; var color = []; function lerpColors() { for (var i = 0; i < rgb1.length; i++) { var color1 = rgb1[i] * rgb1[i]; var color2 = rgb2[i] * rgb2[i]; color[i] = (Math.sqrt(amount * (color2 - color1) + color1)) >> 0; } } Demo: http://codepen.io/osublake/full/xGVVaN/

Wow, what a big difference! Have you tried doing that in GSAP, the whole squaring/square root values thing using some sort of proxy to update the values on? FYI: Next time you need to add a library like that to your code, you can put it inside a <script> tag at the bottom of your HTML. http://codepen.io/osublake/pen/NqNqNb

Isn't addEventListener just for actual DOM events? So you can't listen for GSAP ones like throwUpdate or throwComplete, correct?

Diaco came up with a good solution while I was forking your demo, but here's how I did it using jQuery to use grab and grabbing. http://codepen.io/osublake/pen/EjPOLK

You can also define the scope in your vars. TweenMax.to(element, 1, { //... onComplete: onComplete, onCompleteParams: ["{self}"], onCompleteScope: myScope }); function onComplete(myTween) { // myTween == tween instance // this == your scope }

My bad. I didn't mean for it to come off sounding like that. I never heard of Date.js, so I did a search and saw some issues about Date.now(), including one that said that it no longer adds it own function anymore. Then I saw that the library hasn't been updated in over 7 years, which kind of shocked me, because that's like centuries in JavaScript years. Again, sorry if I came off sounding like that. I was just curious if it was still needed since it has known issues and hasn't been active for awhile. http://stackoverflow.com/a/7350077/2760155

Glad you figured it out, but why are you using Date.js? Hasn't that been replaced by more modern libraries like Moment.js, or do you have some weird legacy thing going on?

I would just add it to the TweenMax thread since there is already a lot good ideas floating around there. I'm all for some type of pub/sub system, especially for draggables, which for the most part can't be scripted like other tweens. Try making a bunch of Draggable objects throwable, responsive, and resizeable, all while bouncing off of eachother and their bounds without using some type of messaging system. It's pretty hard... trust me.

That would be a great feature, and I have requested it. Voice your opinion here. http://greensock.com/forums/topic/11545-event-tween-feature-request/?hl=events#entry47195 PubSub must be really slow, here's your demo using an event dispatcher I made. http://codepen.io/osublake/pen/zGrPRr?editors=001

Setting some arbitrary delay may not do anything if the digest cycle hasn't finished. Even though _.defer is not tied to Angular, it can still work because it is delaying execution based on cycles. However, it is probably better to use $timeout because it also updates the $scope, which may have changed if you have some other directives that were loaded after your draggable. When I first started learning Angular, I ran into issues like this all the time, with some pretty unexpected results. For example, GSAP was able to manipulate the DOM one cycle before jQuery which would really mess stuff up, especially with draggable's hit detection. Now I always unwrap my elements before feeding them into GSAP. Here's some useful information about animations and Angular cycles. https://github.com/angular/angular.js/issues/5130 http://stackoverflow.com/a/17958847/2760155

One problem I see is that the draggable and the wrapper are the same width. The draggable should be wider than the wrapper, which it is in your fiddle. This thread kind of touches on that. http://greensock.com/forums/topic/11580-draggable-children-click/?hl=autoscroll#entry47201 Have you tried running it without extending the props, and not setting the overflow immediately afterwards? Also, I'm getting _ticker.time and vp.t2 NaN values in the console from the ThrowPropsPlugin. Don't know what those mean, but I see a lot NaN ticks being thrown around. When creating directives in Angular, a digest cycle must run a couple times before you can initialize some things. Try running $timeout 2 times before trying to create it. $timeout(function() { $timeout(function() { // Create it here }); }); // Since you're using underscore, you can also do this... _.defer(function() { _.defer(function() { // Create it here }); });

This kind of reminds me of ng-Fx, which is a GSAP version of Animate.css. It don't know if you know Angular, but the source code is still pretty interesting nonetheless. I love how he setup the animation factories. Maybe you can get some ideas from it. Demo... he needs to fix those overflow props http://hendrixer.github.io/ Source https://github.com/Hendrixer/ngFx

I got it working with both your examples, but CodePen is doing maintenance right now so I can't save. The only thing I changed is that I referenced the draggable using "this" instead of draggable[0]. How are you getting that value if your function is anonymous? Also, wouldn't it be better to do that in the snap function since it will pass you the end value?

To center stuff with CSS, I like to use flexbox. But you can do the same with GSAP. Just get rid of your huge line height and add this. TweenLite.set(element, { top: "50%", yPercent: -50 }); http://codepen.io/osublake/pen/NqxvYx

Now that I know why className won't tween the way I expected, its not so much of an issue. Plus I learned a lot of different ways to get styles while making that demo, like using the CSSRulePlugin. What shocked me is how many views my demo was getting on CodePen since it was really intended for people that were reading this thread. All the examples I created were based on a project I was working on that would create a morphing transition between elements. I was trying to create something similar to this quiz demo (click through the general knowledge section). Using className worked well for awhile, but in the end I realized that I only needed a couple properties and not the entire class. https://www.polymer-project.org/0.5/components/core-animated-pages/demos/quiz1.html