[Improve my flaky resize transitions]

I think Firefox is becoming the new IE. I've noticed lots of unexpected behaviors when dealing with it lately. Jitters and jaggies everywhere.

 

I've never really tested my animations, but Yearofmoo said to use a timeout instead of using GSAP's onComplete to call the done function. I think he wrote the animation module, so he should know.

 

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#testing-animations

http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html#greensock-integration

 

[Improve my flaky resize transitions]

Good job!
 
With the way it is setup now, creating a fade transition between the info and person tile won't look right because the ng-switch is only showing 1 element at a time. This would leave the back tile completely blank while one tile is being removed and the other is being added.
 
If you use the animation module, you can have 2 elements being shown in the ng-switch during a transition, the element being removed (leave animation), and the element being added (enter animation). 
 
I created a class for the info and person tiles called switch-tile. It is positioned absolute so that both tiles are at the same position while visible, and not stacked on top of each other. The .switch-tile animation module will now animate these tiles at the same time when they are are being added/removed from the back tile.
 
I also noticed that if you quickly press the info and person buttons on the case tile, it can mess up the resize/flip animation. I added ng-disabled to the case tile's buttons, which is controlled by calling the setTransitioning function. Because this function is called by the timeline, it uses a $timeout to make Angular update the scope. Here's a post I made about getting GreenSock to work with Angular by using $timeout.
 
CodePen:

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

[Help me improve this code to adapt mobile viewports to any dimension by using scaling]

+1 for Michael's recommendation on Phaser.io, which uses the awesome Pixi.js library. I will never attempt to build another game from scratch.
 
Viewport scaling can be real tricky because the aspect ratio can vary greatly across different devices. What I have done in the past is to scale the game's viewable area and the actual game content independently, creating a responsive layout. The view and the game content will scale at the same ratio until a certain aspect ratio is broken, at which point the viewable area will scale to the viewport's aspect ratio. This will eliminate the need to letterbox or crop parts of your game. However, this approach may not be ideal for games where you must maintain a certain aspect ratio, like in a platformer.
 
Here's some screenshots showing this technique in practice. Even when set to a ridiculous proportion, the game elements, shown in red by their bounding boxes, still maintain their original aspect ratio.
 

 

[Improve my flaky resize transitions]

The best way to setup what you have right now is probably to put the info and person tile inside an ng-switch. To control the switch, create a new scope variable called selectedType.

 

How is it going to transition between an info and person tile, flip, fade, etc? Once I know the type of transition, I can offer more detailed advice.

<div class="cardWrapper">
  <div class="card">
              
    <div ng-switch="selectedType" class="cardFace backTile">

      <div ng-switch-when="info" class="infoTile">
        info tile...
      </div>

      <div ng-switch-when="person" class="personTile">
        person tile...
      </div>

    </div>

    <div class="cardFace caseTile">
      case tile...
    </div>

  </div>
</div>

[Cyber Monday]

SERIOUS!!! I just purchased it yesterday. 

[Improve my flaky resize transitions]

Prepending/appending dummy elements to the container won't interfere with the repeater or your data. Although it might mess up some of your logic if you are tracking elements by their $index instead of an id. But I don't think that approach is necessary after messing around with your codepen.

 

I didn't use the animation module, but I did use ng-class to sort out which tiles to hide, which cut out a lot of code. I couldn't get consistent positioning using scrollLeft, so I ended up using getBoundingClientRect. Lots of weird behaviors just kept popping up, but I think I got it fixed.

 

Another thing I noticed is that you were rotating the .card div instead of the individual card faces, which won't work in IE. Rotating the .cardface divs with a relative angle fixes that.

 

CodePen: 

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

 

 

[Improve my flaky resize transitions]

I can look at it more in depth later, but it looks like it is doing that when the container does not have an item in overflow. I bet if you add in some placeholders, so you always have 7 items, it will even it out.

[Improve my flaky resize transitions]

Hey Flex,

 

Have you used the animation module before? There are a lot of built-in Angular directives that will automatically trigger an animation. You can streamline a lot of your code by using some conditional directives like:

• ng-if
• ng-switch
• ng-class
• ng-show
• ng-hide

Also, you might be better off creating a directive for each of your items/cases so you can have more control over what each one is doing.

 

I created an example showing how you can incorporate some of those built-in directives. I wasn't sure what you were trying to do with the MAX_NUMBER_VIEWABLE_TILES, so I just used a filter to limit the number of tiles based on the screen width.

 

Plunker Demo: http://plnkr.co/edit/yOtalOY51OusVZl5uGOU?p=preview

[GSAP weight]

Those are the gzip sizes, and they're accurate. Look above the kb size, 420 B and 414 B. It only download the headers because you have an up to date version cached. That's what that 304 status code means.

[Firefox transform perspective and rotation glitch]

If you disable it, then how do you get a 3D perspective?

[Firefox transform perspective and rotation glitch]

I don't know what's going on at the end of the animation, but if you add a transparent outline to the h2 it will clean up some of those jaggies. 

h2 {
  outline: 1px solid transparent;
}

[Input wanted: should we change the force3D default?]

And yeah, force3D:"auto" would save some typing in a lot of cases. 

 

+1 for anything that saves me typing.

[Easier Animations in Angular 1.3]

Thanks. Those demos are trending pretty well on Plunker so hopefully it will bring in some new people.
 
Yeah. They're randomly rotated 180 degrees. It's sort of like a game where you have to flip the tiles in the right order to get the picture to display right. I didn't provide any notification once you got it right because some of tiles can be all black, and you really can't tell if you have it rotated correctly. 
 
All the logic to flip the tiles is in the tile.js file, and is pretty straightforward even if you don't know Angular. You can test it out in an unjumbled state by commenting out line 47.
 

TweenMax.set(back, {
 //rotation  : _.sample([0, 180]),
 rotationY : -180,
 backgroundPosition: -scope.x + "px " + -scope.y + "px"
});

[Easier Animations in Angular 1.3]

Creating dynamic animations in Angular 1.3 has dramatically improved. You no longer need to inject a service or access your scope to get values for your animation. All animation methods now have an options parameter where you can pass in values to your animation modules.  There is also a new inline animate method where you can pass in from and to values and no longer have to deal with toggling a CSS class name.

 

 

// In a directive
link: function(scope, element, attrs) {      
  scope.moveToMouse = function($event) {        
    var from = { autoAlpha: 0, x: 0, y: 0 };
    var to =   { autoAlpha: 1, x: $event.pageX, y: $event.pageX };     
    $animate.animate(element, from, to);
}

// In your animation module
animate: function(element, className, from, to, done) {
  TweenMax.fromTo(element, 0.5, from, to);
  done();
}

 

 

Here's a simple demo of that code in use

http://plnkr.co/edit/midHzP?p=preview

 

And a more involved demo showing how to flip a card in the direction of the mouse and creating random bezier curves

Demo: http://embed.plnkr.co/CIiLR4/preview

Code: http://plnkr.co/edit/CIiLR4

[Right source for Typescript definitions files?]

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;

[Greensock DOM-Based Animation Demo]

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

[How to get initial properties of tween target?]

I saw other posts where people used the _gsTransform object to get some values. However, that object is not present in my targets :/

 

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;

[Accelerated scale animations do not repaint after tween]

Using force3D: "auto" seems to work.

 

http://jsbin.com/yecoku/1

 

You can read about it here, towards the end of the page.

[Canvas vs regular DOM elements]

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.  

[(example) Infinity Scrolling with TweenMax]

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

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

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.

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

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

[Bug: Can't use < or > in SplitText content]

If you put a space after the < it works, or you could put some ASCII characters, but none of those are really ideal. 

 

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

 

They monitor the forums and are really quick to respond, so I wouldn't worry unless you need it working tonight;

[sortable elements with draggable]

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

[sortable elements with draggable]

Gui - are you talking about doing a hit test like this?

 

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