OSUblake

GSAP has to do a transform on the element before the _gsTransform object will be available. You could do something like this to setup the initial transform. TweenMax.set(target, { x: "+=0" }); If you have already done a transform and still cannot find the _gsTransform object, you're probably looking at a jQuery wrapped element, which is an array. The DOM element will be the first item in the array, so try this. var xPos = target[0]._gsTransform.x;

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

One thing to consider is that performance on a lot of mobile devices is pretty bad with canvas unless you use an accelerated canvas wrapper like CocoonJS. The problem with that approach is that the user has to download an app that you deploy. Fortunately WebGL is becoming more of the standard now, which can greatly improve performance over the 2D canvas, especially on mobile devices. The downside is that programming for WebGL can get pretty complicated without a library.

On a large screen it won't start unless you resize it.

That looks so cryptic! Is hard to use GSAP with Edge? I saw a video on it, and it looked the guy would create the animation then rip all the Adobe code out.

If you want to target them all, you could just give them all the same class or target the element type. You don't even have to use jQuery to do that with the latest version of GSAP. // By element TweenMax.to("button", .25, {opacity:0, ease: Linear.easeNone}); // By class TweenMax.to(".my-class", .25, {opacity:0, ease: Linear.easeNone});

If you put a space after the < it works, or you could put some ASCII characters, but none of those are really ideal. http://codepen.io/osublake/pen/kDcfB They monitor the forums and are really quick to respond, so I wouldn't worry unless you need it working tonight;

It sounds like what I was trying to do with the dataTransfer object, but I couldn't get it to work.

Gui - are you talking about doing a hit test like this? http://codepen.io/osublake/pen/mavID

Jamie - Drag and Drop has actually been part of IE since version 5 if you can believe that. But if you could use the dataTransfer object, it could greatly simplify this problem. The problems is that the Draggable utility sends a mouse event and not a drag event. I tried triggering a drag event on the mouse events, but I still couldn't set the data object. Oh well, your solution looks really nice.

Lol... you're good! That post I made had nothing to do with chagui. Sorry if that confused you. I was just curious about being able to use native HTML5 Drag and Drag functionality with the Draggable utility, specifically the dataTransfer object, which allows you to get/set clipboard data. http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-dataTransfer

You didn't set the position on the to http://codepen.io/osublake/pen/yqLne

I'm curious about this problem. Is there a way to get/set the dataTransfer object using the Draggable utility?

You can create a variable using a data attribute. http://codepen.io/osublake/pen/kjspJ

Some of the Plunks where set to private, but they should show up now. A nice utility library is Lo-Dash, which is just an improved version of Underscore. Angular is definitely the way to go for building rich single-page apps. Try building the tutorial. It gives you a little taste of everything Angular has to offer, including animations. Polymer and Shadow DOM are also pretty awesome. You can build custom html elements just like Angular directives. The next version of Angular is actually going to use Polymer for building elements. Some paper elements Here's a Polymer demo I created. Notice how index.html is importing the <greensock-square> element from a url. Everything is self-contained inside an element, allowing you to share it, or import other elements. http://plnkr.co/edit/p2LVoQ?p=preview

Forget what I said above. I think I understand you now. Instead of using an absolute div, I just extended the bounds to whatever the offset is. I also added a button so you can see it still works when you change the size. http://codepen.io/osublake/pen/ifomn

Pixi.js is the best WebGL/Canvas renderer I've tried, although I prefer to use Phaser, which is a Pixi game framework that does basically everything. I was totally shocked today when I discovered that I could use GSAP instead of Phaser's tweening engine. Everything I tested seems to be in sync. http://www.html5gamedevs.com/topic/6773-phasers-tweening-syste-does-not-meet-my-needs-i-think/?hl=greensock#entry40388 Phaser.io

If you want to use the Draggable util to make a slider, scrubber, etc., you need to take in account the width of what you are dragging. Notice in Warrior's example how the max only goes to 381 when it should go to 400. To fix this you need to offset the range based on the position of the draggable. To be able to click anywhere on the slider and start dragging, turn your slider into a static draggable and then select what you want to drag. Here's the updated pen. I moved the knobs down so you can see how the range is being offset. http://codepen.io/osublake/pen/bEcBH

I'm currently working on creating an Angular/GSAP tutorial that incorporates many of the things Matt asked about. I've created a playback service that can be injected anywhere your app, allowing you to manage/add tweens in different modules, watch/observe changes in the timeline, and broadcast events up and down your scope hierarchy. Here's a demo of how it works with some simple animations http://plnkr.co/edit/bG20DKs9GKGai29TsEEm?p=preview Timeline duration, progress, speed, time, timeScale, paused, and reversed are all bound to the service, which will update the buttons, timeline status, and scrubber. Add as many animations as you want and then reset it to see the binding in action. The playback service also use the keyboard to quickly manipulate the timeline.

To anybody who is starting to learn Angular with a jQuery background, please read these StackOverflow responses. It will really help put you in the right mindset. jQuery really seems to hamper peoples ability to learn Angular, and this might save you a bunch of time. http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

Failure13, The reason none of your code was working is because the .on() method runs outside the context of Angular. Angular is not aware of any changes made by third party libraries. This includes jqLite, jQuery, GreenSock, etc. To make Angular aware of any changes made by a third-party library, a digest cycle must run. The easiest way to trigger a digest is to call scope.$apply(). However, if Angular is already watching something that you modified, you may get a digest already in progress error. To get around this, use $timeout with a 0 delay instead. $timeout is injected into your directive/provider, and will automatically call $apply on the next digest. Check out this Plunk http://plnkr.co/edit/Z28hiklSk8IsyQ2Bi45s?p=preview Notice how the first box does not respond without a $timeout or $apply call.

There are several ways to go about this in Angular. Option 1: You can bind the fill color to your scope and then interpolate the color in a directive. <path fill="{{color}}" /> Option 2: Create a directive for each of your SVGs and put ng-mouse* directives in your SVG attributes. Plunk http://plnkr.co/edit/2sw5Ys05rVoNpNKMRsMh?p=preview Option 3: While Option 2 works, it's not really efficient because Angular is all about creating reusable components. The Plunk above can be easily modified to handle all your SVGs, all with different colors and times. <icon-svg file-name="twitter.svg" dim-time="0.4" to-time="1.0" to-color="cyan"></icon-svg> Plunk http://plnkr.co/edit/SNdgqm?p=preview Notice in the Plunks how type: "svg" is included in the directives. This is new to Angular 1.3, so make sure you are running the latest version before adding it.

Angular plays very nicely with GSAP. Unfortunately, there is not a lot of documentation on using JavaScript animations with Angular. Most of the articles you find only detail how to do CSS animations. Starting with Angular 1.3, each of the $animate service methods returns a promise, which can also be called to cancel the animation. $animate.addClass(element, "my-class") .then(function() { // do something once the animation is complete }); Here's a Plunk demonstrating this. http://plnkr.co/edit/mjIlvxHJhnl7sLQPqbnh?p=preview If you want to chain animations, you could use $q to chain the promises together like this. $q.when() .then(function() { var moveUp = $q.defer(); $animate.addClass(element, "move-up").then(function() { moveUp.resolve(); }); scope.$apply(); return moveUp.promise; }) .then(function() { var moveDown = $q.defer(); $animate.addClass(element, "move-down").then(function() { moveDown.resolve(); }); scope.$apply(); return moveDown.promise; }) .then(function() { // More promises... });

Hi failure13, It's kind of hard to tell what you are trying to do, but it looks like you are forcing Angular to act like jQuery, which is a no-no. In the Angular world, jQuery should only be used as a last resort. There is usually an Angular way of doing things i.e. ng-click, ng-mouse*, ng-key*, etc... I also noticed in your screenshot that you created an animation module for ng-scope, which is another no-no. ng-scope can be used by other elements so your animations may not work correctly. Only create animation modules with class names that you create. I created a Plunk that uses no jQuery to help you out. The collapse directive uses the $animate service and will work with an ng-repeat inside of it. http://plnkr.co/edit/wHUybThuY2qt4iAv5k7u?p=preview Blake

I just started using GSAP and really love it, but trying to get the `updateTo` method to work had me stumped for several hours. The documentation is VERY misleading. I read the part about it not working for plugin values, but then the example shows CSS values with comments describing those values. This makes it seem like it does work with the CSSPlugin: //create the tween var tween = new TweenMax(mc, 2, {x:100, y:200, opacity:0.5}); //then later, update the destination x and y values, restarting the tween tween.updateTo({x:300, y:0}, true); //or to update the values mid-tween without restarting, do this: tween.updateTo({x:300, y:0}, false); Can the documentation be updated with another example so other people don't assume the same thing? Thanks