Famo.us/Angular: Animate data structure changes with Famo.us

In this example below you will see how to do a Famo.us/Angular: Animate data structure changes with Famo.us with some HTML / CSS and Javascript

For more info see my blog: http://viz-co.de/

Thumbnail
This awesome code was written by aknip, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aknip ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Famo.us/Angular: Animate data structure changes with Famo.us</title>
  
  
  <link rel='stylesheet prefetch' href='http://www.viz-co.de/js-dependencies/famous-angular-0-3-0.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,300,100'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="famousApp">  <!-- define Angular App -->
    
    <presentationframe device="iphone">
    </presentationframe>

    <!-- Templates for UI Router (inline for CodePen) -->

    <script type="text/ng-template" id="homeview.html">
        <fa-app class="appsize" style="margin: 0;" fa-perspective="1000">
      
          <fa-modifier fa-translate="[0,30,0]">
            <fa-view id="view1">
              <fa-surface>
                 <input type="range" ng-model="config.translateX" style="width:310px" />
              </fa-surface>

              <fa-modifier fa-translate="[config.translateX*2.65 , 30]">
                <fa-surface fa-size="[40, 40]" fa-background-color="'red'">
                </fa-surface>
              </fa-modifier>
            </fa-view>
          </fa-modifier>  

          
          <fa-modifier fa-translate="[0,200,0]">
            <fa-view id="view2">
              <fa-surface>
                 <input type="range" ng-model="config.repeatedItems" min="0" max="16" />
              </fa-surface>

              <fa-modifier
                   squaremod
                   ng-repeat="modifier in modifiers"
                   fa-animate-enter="enter()"
                   fa-animate-leave="leave()"
                   fa-animate-halt="halt()"
                   fa-transform="transform"
                   fa-opacity="opacity" >

                   <fa-surface fa-size="[40, 40]" fa-background-color="'orange'">
                   </fa-surface>
               </fa-modifier>  
             </fa-view>
           </fa-modifier>
          
        </fa-app>
    </script>
  
    
</div>
  <script src='http://www.viz-co.de/js-dependencies/famous-angular-dependencies-0-3-0.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/aknip/famousangular-animate-data-structure-changes-with-famous-jxoaD */
body { 
  padding: 0;
  margin: 0;
  font-family: "roboto";
  font-weight: 300; 
}


.phone-view-container{
  position: absolute;
  left: 33px;
  top: 122px;
  width: 320px;
  z-index: 2;
}

@media (max-width: 385px) {
  .phone-frame{
    display: none;
  }

  .phone-view-container{
    left: 0;
    right: 0;
    top: 0;
  }
}


.famous-angular-container {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* APP STYLES */




/*Downloaded from https://www.codeseek.co/aknip/famousangular-animate-data-structure-changes-with-famous-jxoaD */
//
// For more info see my blog: http://viz-co.de/
//

// UI Router

angular.module('famousApp', ['famous.angular', 'ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/homeview");
        $stateProvider

            .state("homeview", {
                controller: "homeview",
                url: "/homeview",
                templateUrl: "homeview.html"
            }) 

    }); 

// Controller


function translateSquare(index) {
    return 70 * (index || 0) + 35
}

angular.module('famousApp')
    .controller('homeview', function ($scope, $famous) {
        
        $scope.config={
          translateX: 14,
          repeatedItems : 6
        }; 
      
        $scope.squares = _.map(_.range(0, 4), function(index) {
            return {x: translateSquare(index)}
        });
      
        $scope.modifiers = [0, 1, 2]; 
      
        $scope.$watch("config.repeatedItems", function(value) {
            $scope.modifiers = _.range(0, value)
        });
      
        
        
    });


angular.module('famousApp')
    .directive("squaremod", ["$famous", function($famous) {
        var Transform       = $famous["famous/core/Transform"];
        var Transitionable  = $famous["famous/transitions/Transitionable"];
        var SnapTransition  = $famous["famous/transitions/SnapTransition"];
        var flipOut = Transform.rotateZ(Math.PI / 2);
        var flipIn = Transform.inverse(flipOut);
      
        return {restrict: "A",priority: 3,link: function(scope) {
          
                function enter() {
                    return transform.set(Transform.multiply(transform.get(), flipIn), {duration: 250,transition: SnapTransition}), opacity.set(1, {duration: 250,curve: "easeOut"}), 250
                };
          
                function leave() {
                    return transform.set(Transform.multiply(transform.get(), flipOut), {duration: 250,transition: SnapTransition}), opacity.set(0, {duration: 250,curve: "easeIn"}), 250
                };
          
                function halt() {
                    scope.transform.halt()
                };
          
                var transform = new Transitionable(
                  Transform.multiply(
                    Transform.translate(translateSquare(scope.$index % 4), 60 * Math.floor(scope.$index / 4) + 40, 0), 
                    flipOut)); 
                
                var opacity = new Transitionable(0);
          
                angular.extend(scope, {enter: enter,leave: leave,halt: halt,opacity: opacity,transform: transform});
          
            }}
    }]);


angular.module('famousApp')
  .directive('presentationframe', function($compile) {
    return {
      replace : true,
      scope : false,
      restrict: 'EA',
      link: function($scope, $element, $attr) {
        // Compute Output DOM:    
        var deviceDom1 = '<div style="position: relative; width: 385px; margin: 0 auto;"> <!-- Phone Picture as SVG --> <svg class ="phone-frame" x="0px" y="0px"viewBox="0 0 188 390" enable-background="new 0 0 188 390" xml:space="preserve" preserveAspectRatio="none" height="812" width="384">  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,58H3.7c-1,0-1.8,0.8-1.8,1.8v13.4c0,1,0.8,1.8,1.8,1.8h0.2   L3.9,58L3.9,58z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,93.1H3.7c-1,0-1.8,0.9-1.8,1.9v9.6c0,1.1,0.8,1.9,1.8,1.9h0.2   L3.9,93.1L3.9,93.1z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,124.6H3.7c-1,0-1.8,0.9-1.8,1.9v9.6c0,1.1,0.8,1.9,1.8,1.9   h0.2L3.9,124.6L3.9,124.6z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M184.2,352.4V41c0-35.5-23.1-35-23.1-35s-96.4,0-127.9,0   S3.6,41,3.6,41v311.4c0.4,35.5,24.1,32.8,24.1,32.8s105.9,0,131.8,0C185.4,385.2,184.2,352.4,184.2,352.4z"/>  <path fill="#414141" d="M173.6,331c0,1-0.8,1.8-1.8,1.8H16.3c-1,0-1.8-0.8-1.8-1.8V59.7c0-1,0.8-1.8,1.8-1.8h155.5   c1,0,1.8,0.8,1.8,1.8L173.6,331L173.6,331z"/>  <ellipse fill="#F0EEE9" cx="94.1" cy="357.7" rx="16.7" ry="16.5"/>  <ellipse fill="#FFFFFF" cx="94.1" cy="357.7" rx="14.9" ry="14.8"/>  <path fill="#5E5E5E" d="M109.1,38.8c0,1-0.8,1.8-1.8,1.8H80.9c-1,0-1.8-0.8-1.8-1.8V38c0-1,0.8-1.8,1.8-1.8h26.4   c1,0,1.8,0.8,1.8,1.8V38.8z"/>  <ellipse fill="#5E5E5E" cx="69.3" cy="38.4" rx="2.5" ry="2.5"/>  <ellipse fill="#5E5E5E" cx="94.1" cy="24.2" rx="3.4" ry="3.4"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M152,5.9c0.7,0,1.4,0,2.1,0.1V4.2c0-1-0.8-1.8-1.8-1.8h-27.2   c-1,0-1.8,0.8-1.8,1.8v1.6H152z"/>  </svg>';
        
        var deviceDom2 = '</div>';
        
        var famousDomDevice = '<!-- Container for Famo.us --> <div class="phone-view-container" ui-view></div>';
        
        var famousDomPlain = '<!-- Container for Famo.us --> <div class="plain-view-container" ui-view></div>';
        
        var css1 = '<style type="text/css"> \n'+ 
                    'Add style rules here \n'+
                    '</style> \n';
        
        var device = $attr.device || 'none';
        
        var width = window.innerWidth;
        var height = window.innerHeight;
        
        var outputDOM = '';
        var csscode = '';
        
        if (device != 'none') {
          outputDOM = angular.element(deviceDom1 + famousDomDevice + deviceDom2);
          csscode = ".appsize {width:320px; height:568px}";
        } else {
          outputDOM = angular.element(famousDomPlain);
          csscode = ".appsize {width:"+ width +"px; height:" + height + "px}";
        }
        
        // CREATE CSS       
        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          // IE 
          style.styleSheet.cssText = csscode;
        } else {
          // Other browsers
          style.innerHTML = csscode;
        }
        document.getElementsByTagName("head")[0].appendChild( style );

        // compile and finish
        var $e =$compile(outputDOM)($scope);
        $element.replaceWith($e);
      }
    }    
  });

Comments