OSUblake

I love using TypeScript! It's not another language like Coffee or Dart, but a superset of JavaScript similar to how LESS and SASS are to CSS. TypeScript also lets you use a lot of ES6 features like fat arrow functions and modules. I'm working on another definition file because the one on DefinitelyTyped is out of date, missing types, and doesn't include any overloads for get/set methods. I'm also including JSDoc comments so a description with all the arguments will popup. I'll post here when I'm done and will also send a pull request to DefinitelyTyped so they can update the definition. To get around errors because a definition is missing, you can just declare it. declare var SplitText; declare var Draggable; You might also get errors on your targets with the current definition, so you should update the targets in the definition file to be type any instead of Object. static to(target: any, duration: number, vars: Object): TweenMax;

That's crazy! Have you been using GSAP during all of its development, or did you switch partway through?

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... });