OSUblake

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.

Hi andyr
 
There are several issues with your example. First, you are not adding the tween to your timeline. 
tl.add(tween); // Should be vm.tl.add(vm.tween); Second, you are trying to invalidate and change the vars on your timeline.
vm.tl.vars.css.top = 200; // Should be vm.tween.css.top = 200; Third, you should probably handle animation in an animation module and not the controller. The controller is a view model, so you really only need 1 line of code.
vm.show = false;
See the Pen pJJZdj by osublake (@osublake) on CodePen

Try making your #doc element bigger for the autoScroll to work.
 

See the Pen MYMErE?editors=001 by osublake (@osublake) on CodePen

Sounds like you got a lot of issues with whitespace. You can remove the leading and trailing whitespace using trim or with this regex...
// leading and trailing myString.replace(/^\s+|\s+$/g, ""); // or all whitespace... myString.replace(/^\s+|\s+$/g, "").replace(/\s+/g, " ");

Hi saturnflyer
 
Check this out, and let me know what you don't understand.
 
I positioned all the elements absolutely from the same origin just to make it easier to see how I'm calculating the offset. The _gsTransform is a property GSAP adds to elements to store transform values like x, y, rotation, scale, etc.
 

See the Pen bNJPwM by osublake (@osublake) on CodePen

Chicken scratch! The only words I could read were "Draggable, letter.forEach, and Check Hit".
 
So I took Carl's advice and put the description in the code. While I was in there, I did some refactoring, like adding jQuery to simplify some things so other people might have an easier time understanding it. I like where this is going, so I think I'm going to have to do a part II, implementing some of the features that were just added to Draggable, like autoScrolling.
 
Original version:

See the Pen RNdBOe by osublake (@osublake) on CodePen
 
Refactored version:

See the Pen XJQKVX by osublake (@osublake) on CodePen
 
I totally understand the colors. Before I posted this to CodePen, I had a toggle button on there that would add outlines and background colors so I could see where the elements were.
 
Anyways, you're right about the touch messing up because of the mousedown. Adding a touchstart event seems to have fixed that. I'll have to look at  your code later tonight to see what you got going on with the tiles moving around when you press them. Something looks weird.
 
Moving tiles back to their original position shouldn't be too hard. Just record its position before you remove it. You can check out how I did it in this demo. When you drag a tile out of bounds and release it, it will go back to it's last position. Because the grid is always being sorted in a certain order, I just record it's index and not the actual coordinates.
 

See the Pen RNLdpz by osublake (@osublake) on CodePen

Hi tomekpilot
 
UpdateTo isn't working because x is a CSS-Plugin value. Don't worry, I got confused by what it does when I first started using GSAP.
 
So what you need to do is to create another tween with your new x value. I updated your profile2 function showing how to do this while putting everything inside a new timeline. 
 

See the Pen pvYydx by osublake (@osublake) on CodePen

Hi captainlardnicus
 
You were on the right track, but you had some CSS positioning problems going on.
 
If you want more control, you can manually create the rotation when onDragEnd is called using the ThrowPropsPlugin. This will allow you to adjust things like the angular velocity or its transform origin.
 

See the Pen KwbxNX by osublake (@osublake) on CodePen

I was able to get it working using what Sebastian wrote in this thread.

// Using the uncompressed file in node_modules/gsap/src/uncompressed/TweenMax.js var window = {} , navigator = { userAgent: "" } , dummyElement = { style: {}, getElementsByTagName: function() { return [] } } , document = { createElement: function() { return dummyElement } }; // START OF FILE var _gsScope = (typeof(module)... ... this || window, "TweenMax"); // END OF FILE module.exports = TweenMax; Inside your module you should be able to do this...

var TweenMax = require("gsap"); var foo = { x: 0 }; TweenMax.to(foo, 1, { x: 100, onComplete: onComplete }); function onComplete() { console.log("foo.x == ", foo.x); // 100 }

Its going to be offset 200px in the second tween, so just undo it.
var logo = document.getElementById("elem"); new TweenMax(logo, 2, { x: 200 }); new TweenMax(logo, 2, { x: 0, left: 50, delay: 2 });

Hi bluisier
 
If you create your charts in your update function it seems to work.  
 

See the Pen azjvEo by osublake (@osublake) on CodePen

If you cleared your cache and are still seeing a difference between CodePen and a normal browser window, my best guess would be that Evernote is initializing and parsing the page which is causing a delay.  Because CodePen runs in a frame, you won't see a delay like you do with a hard refresh.
 
Try adding a delay and a repeat to your animation to see if the problem still persists after some time has passed.

Hi Gani,
 
Staggered tweens are supposed to have the same destination values, but you are trying to create unique ones. If you need unique values, you can stagger the delay for each tween or its timeline position.
 

$(".box").each(function(i, box){ var $box = $(box); TweenLite.to($box, 1, {left: $box.position().left, top: $box.position().top, delay: i * 0.2 }); });
See the Pen myLdVB by osublake (@osublake) on CodePen

Hi OneIAmFor,
 
You have the window responding to your mouse events, which is the entire viewable area. You probably only want the $box to respond your mouse events.
 
However, getting the image to track the mouse position when you are hovering over the box might not work that well if you move the mouse too fast. What you could do is create a container for your image, and track the mouse movement in that area. You could set it up where you have to hover over the image before mouse movement in the container will start to move the image. I added red outlines so you can see when the mouse movement event is activated.
 

See the Pen emVPMw by osublake (@osublake) on CodePen

Put your scripts before the closing </body> tag. You're running the script before the html is ready.
 

See the Pen raJvZr by osublake (@osublake) on CodePen

Hi Yashi,
 
Here's some mockups made for the Angular gsTimeline project. Look inside the HTML to see how a GSAP timeline is being used to create some of these animations. 
 

See the Pen KwNoNP?editors=100 by ThomasBurleson (@ThomasBurleson) on CodePen

See the Pen jEVyjr?editors=100 by ThomasBurleson (@ThomasBurleson) on CodePen

Try using yPercent and cutting the bounds in half. And since it won't pass its edge, you can use dragResistance instead. You could even change the dragResistance based on its position.
TweenLite.set(nav, {x:0, y:0, z:0, yPercent: 50}); //... bounds: {minY: -50, maxY: 0}, dragResistance: 0.85,
See the Pen NPyjRY by osublake (@osublake) on CodePen

Hi Virtous,
 
As long as you are not storing a reference to the timeline, like in some other variable, it will go to garbage collection when ready. There is always going to be some sort of impact when you create a new object, but will it make a noticeable difference? Maybe if you are creating 20,000 of them, but not with the code you have above.
 
Are you reusing the timeline, like to replay or reverse it, or do you create a new animation every time?  If you are not using reusing it, and those are you are 2 lines of code, why don't you just use a regular tween?
 

TweenLite.to(this.$nextSlide, this.settings.speed, {opacity: 1, right: '10%', ease: this.settings.easing}); TweenLite.to(this.$currSlide, this.settings.speed, {opacity: 0, right: '0%', ease: this.settings.easing}); For the CDN, you can customize what you want by going to the GreenSock Home Page and clicking on the download button right in the middle. It sounds like you only need the lightweight setup, depending on whether or not you really need a timeline.

Thanks. I originally started out trying to copy some of the algorithms DeSandro uses, but soon realized that most layouts can be achieved using a simple tracking loop.
 
Just for the sake of comparison, here's what my demo would like if I used Isotope/Packery+Draggabilly over GSAP. The response time is a lot slower, my range of customization is very limited, and the layout seems to break when I drag a tile off screen and release it.
 
+1 for GSAP
 

See the Pen LEzKPr by osublake (@osublake) on CodePen

Hi Janmd,
 
Our examples are doing the same thing, the only real difference is Diaco's example is listening for mouse events, which fire once. In my example, I'm listening for keydown events which constantly fire, so I added in some basic logic to prevent it from recreating a new animation every time it fires. 
 
jQuery is not needed for anything related to GSAP. We only used it to find the document height, window height, window scrollTop, and mouse/keyboard events. Nothing special. 
 
Here's another version that you can play around with to make a comparison. Instead of using some arbitrary total/scroll time value, you can enter a speed value for how many pixels you want it to scroll per second. I also added in a timeScale value, which will increase the speed when you press or release the CTRL button. Using timeScale would be a good way to create the different speeds for you num pad buttons.
 

See the Pen myMNNL by osublake (@osublake) on CodePen

I had a hard time understanding your question because you responded back that selecting an element was not the problem. If you could select the element, then you could figure out its position. Were you using jQuery to do this?
 
Not that it matters now, but I created a scroll to demo to try and figure out what the issue was. I'm guessing you were trying to get the position inside some deeply nested elements because I had no problems going down 1 level. Oh well, glad you figured it out!
 
http://plnkr.co/edit/czdXVFv9tojP3B1Ac0Ds?p=preview

Hi Yashi,
 
Are you using Foundation to build your app, and what are you trying to do with Motion UI? It sounds like you are looking for a way to animate route/view changes.
 
I made a little demo to demonstrate how to do this with UI Router, which is what Foundation uses. No need to mess with Motion UI.
 
Plunker URL: http://plnkr.co/edit/UOp1ZD?p=preview
 

Using force3D: "auto" seems to work.
 
http://jsbin.com/yecoku/1
 
You can read about it here, towards the end of the page.

You can create a variable using a data attribute.
 

See the Pen kjspJ by osublake (@osublake) on CodePen