ngMorph | angular module for packaging transitions into directive

ngMorph

ngMorph

Stars : 10

Forks : 10

Created by Jim O'Brien

bower install angular-morph

Demo Download GitHub

ngMorph Build Status

Morphable Elements

This module is an attempt at packaging transitions/animations into directives that enable the reuse of elements by morphing them into other elements. The idea was inspired by Google's Topeka project and a great concept I saw on Codrops. Simply create an originating element and apply the ng-morph-<type> directive to make it morphable. Check out the demo page to see it in action!

ngMorph Demo

Demo

Available here. Demo source available here.

Getting Started

  1. Install with bower:

      bower install --save angular-morph
    
  2. Include the module in your project:

    js angular.module('yourApp', ['ngMorph']);

Usage

Morphables require a settings object which you define in your controller. Settings for each morphable can be found in their respective usage example below.

Modal

html <button ng-morph-modal="settings"> Log In </button>

js app.controller('AppCtrl', function ($scope) { $scope.settings = { closeEl: '.close', modal: { templateUrl: 'path/to/view.html', position: { top: '30%', left: '20%' }, fade: false } } });

Modal Settings - closeEl: A class/id selector that will close the modal when clicked. - modal: Required. The modal configuration object. - templateUrl: Required if template is not defined. The path to the view template. - template: Required if templateUrl is not defined. An HTML template string. If templateUrl is also defined, template will take priority. - position: Optional. The positioning of the end-state element. Can either be pixels or a percentage. If no unit is specified, the input will be treated as a percentage ("30" => "30%"). - fade: Optional. Fade the background content when the modal is open. Default is true.

Overlay

html <div ng-morph-overlay="settings"> ... </div>

js app.controller('AppCtrl', function ($scope) { $scope.settings = { closeEl: '.close', overlay: { templateUrl: 'path/to/view.html', scroll: false } } });

Overlay Settings - closeEl: A class/id selector that will close the overlay when clicked. - overlay: Required. The overlay configuration object. - scroll: Optional. Disable scrolling when overlay is active. Default is true. - templateUrl: Required if template is not defined. The path to the view template. - template: Required if templateUrl is not defined. An HTML template string. If templateUrl is also defined, template will take priority.

Expand (Coming Soon!)

html <div ng-morph-expand="settings"> ... </div>

js app.controller('AppCtrl', function ($scope) { $scope.settings = { closeEl: '.close', expand: { templateUrl: 'path/to/view.html' } } });

Views

In order for elements to morph into their end-state view properly, the contents that make up the view need to be wrapped in a single containing element. Here's an example of what a proper view looks like:

```html

```

Contributing

What's Next

There is a lot of work to do before this is ready for an alpha release.. Following is a list of todos to get this repo in shape:

  • [X] Abstract functionality from the post-linking function of the morphable directive.
  • [X] ~~Refactor using ngAnimate and GSAP~~ (sticking with CSS transitions)
  • [X] Add support for nested morphables (morphables within view templates)
  • [ ] Add different transitions (modal, screen overlay, expand (left, right, down, up))
  • [ ] Add before/after animation hooks.. (or broadcast events?)
  • [ ] Validate input settings
  • [ ] Add error handling
  • [ ] Write tests
  • [ ] Write docs
  • [ ] convert these items into GH issues

Javscript

Javascript plugin

Angular-js