[sortable elements with draggable]

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.

[sortable elements with draggable]

I'm not sure if it's because chagui keeps editing their posts or if I'm just being dumb right now - what's the dataTransfer object?

 

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

[unexpected behaviour when changing .from -> .fromTo]

You didn't set the position on the to

 

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

[sortable elements with draggable]

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

[Onclick event to swap text boxes: best method?]

You can create a variable using a data attribute.

 

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

[Best Javascript Library to work with GSAP?]

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

[Input range slider]

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. 

 

 

 

[Pixi.js]

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

[Input range slider]

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.

 

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

[Binding to timeline]

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.

[GSAP + Angular JS]

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

[GSAP + Angular JS]

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.

[Need some hover Play() / Reverse() approach help]

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.

[Using Greensock to create Durandal transition]

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

[Collapse with GS (bootstrap-like)]

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

[Can't get updateTo to work]

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