Spring Transitions

[oojr]

trying to use spring animations but not sure how to set up the controller or html

<fa-app class="full-screen">
  <fa-modifier fa-origin="[.5, 0]" fa-translate="[bouncy.get]">
    <fa-surface fa-size="[100, 100]" fa-background-color="'rgb(5,22,48)'">
    </fa-surface>
  </fa-modifier>
</fa-app>

'use strict';

angular.module('famousAngularStarter')
  .controller('MainCtrl', function ($scope, $famous) {
    var Transitionable = $famous['famous/transitions/Transitionable'];
    var SpringTransition = $famous['famous/transitions/SpringTransition'];
    Transitionable.registerMethod('spring', SpringTransition);
    var spring = {
      method: 'spring',
      period: 1000,
      dampingRatio: 0.3
    };

    $scope.bouncy = new Transitionable(0);
    $scope.buttonFlyDown = function(){
      $scope.bouncy.set(100, {method : 'spring', dampingRatio : 0.5, period : 500});
    }
    $scope.buttonFlyDown();
    //$scope.movement = {
    //  springDown: Transform.translate(0, 300, 0), spring;
   // }
  });

[thuongvu]

I just tested this, and it works, so please tell me if it works for you as well.

<fa-modifier fa-size="[100, 100]" fa-origin="[0.5, 0]" fa-translate="bouncy.get()">
  <fa-surface fa-click="buttonFlyDown()" fa-background-color="'rgb(5,22,48)'">
  </fa-surface>
</fa-modifier>

var Transitionable = $famous['famous/transitions/Transitionable'];
    var SpringTransition = $famous['famous/transitions/SpringTransition'];
    Transitionable.registerMethod('spring', SpringTransition);

    var spring = {
      method: 'spring',
      period: 1000,
      dampingRatio: 0.3
    };

    $scope.bouncy = new Transitionable([0,0,0]);
    $scope.buttonFlyDown = function(){
      $scope.bouncy.set([200, 200, 0], {method : 'spring', dampingRatio : 0.5, period : 500});
    };

With fa-translate, pass bouncy.get(), a function that returns the interpolated state of a transition, so in this case, [0,0,0]. By binding it to the scope this way, if bouncy changes, the view will reflect that immediately.

In the controller, with $scope.bouncy, pass an array to instantiate the Transitionable, because it expects [x, y, z] values as the first argument, in the case of a translate.

With $scope.bouncy.set(), pass it the end state of the transition, with [x,y,z] values. You can change those to anything you'd like.

Also, I noticed there was nothing triggering the animation, so I added an fa-click="buttonFlyDown()" to your fa-surface.

One last note, it's better to set fa-size on the modifier rather than on the fa-surface itself. In Famous, modifiers affect all child elements below it.

Hope this helps!

Edit: I just noticed that you called $scope.buttonFlyDown() in your controller, and that would trigger the animation.

[oojr]

Nice @thuongvu , it works for me too, one thing though, I am trying to start the spring transitions on page load instead of click

[zackbrown]

Great explanation, @thuongvu. @oojr, you should just be able to call $scope.buttonFlyDown() from your controller and it will execute on page load.

[oojr]

Thanks I have the famous spring animations working

<fa-app class="full-screen">
  <fa-modifier fa-size="[100, 100]" fa-origin="[0.5, 0]" fa-translate="bouncy.get()">
    <fa-surface fa-background-color="'rgb(5,22,48)'"></fa-surface>
  </fa-modifier>
</fa-app>

'use strict';

angular.module('famousAngularStarter')
  .controller('MainCtrl', function ($scope, $famous) {

    var Transitionable = $famous['famous/transitions/Transitionable'];
    var SpringTransition = $famous['famous/transitions/SpringTransition'];
    Transitionable.registerMethod('spring', SpringTransition);

    var spring = {
      method: 'spring',
      period: 1000,
      dampingRatio: 0.3
    };

    $scope.bouncy = new Transitionable([0,0,0]);

    $scope.buttonFlyDown = function(){
      $scope.bouncy.set([0, 300, 0], {method : 'spring', dampingRatio : 0.5, period : 1000});
    };

    $scope.buttonFlyDown();
  });