├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── simple.html
    └── timeline.html
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Luigi De Rosa
3 | 
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 | 
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 | 
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # clip-rect
 2 | `clip-rect` is an helper to create clip rect animation with Greensock.
 3 | 
 4 | Clip animations are nice, but sometimes they are hard to manage; `clip-path: inset()` is not supported everywhere, and `clip: rect()` is painful to handle and it doesn't supports percentage values.
 5 | 
 6 | This little helper aims to make rect animations easier w/Greensock GSAP.
 7 | 
 8 | 
 9 | # Usage
10 | ```
11 | npm install clip-rect
12 | ```
13 | 
14 | ```javascript
15 | new ClipRect(HTMLElement[, options]);
16 | ```
17 | It returns a GSAP `TweenLite.to` call which can be used in GSAP timelines.
18 | 
19 | `options` is an optional argument which can contain an object with different options:
20 | 
21 | | Value        | Default           | Description  |
22 | | :------------- |:-------------| :-----|
23 | | duration      | 0.4 | Duration of the tween (in seconds) |
24 | | ease      | TweenLite.defaultEase      |   GSAP easing function |
25 | | from | ClipRect.RIGHT      |    Direction of the start of the tweening |
26 | | to | ClipRect.LEFT      |    Direction of the start of the tweening |
27 | | clearProps | true      |    Whether remove the inline style after the animation |
28 | | reverse | false      |    Reverse the animation (for animateOut) |
29 | 
30 | # Example
31 | ```javascript
32 | var el = document.getElementById('box');
33 | 
34 | new ClipRect(el, {
35 |     from: ClipRect.RIGHT,
36 |     to: ClipRect.LEFT,
37 |     duration: 1,
38 |     reverse: true,
39 |     clearProps: false
40 |  });
41 | ```
42 | 
43 | # Example with timeline
44 | ```javascript
45 | var el = document.getElementById('box');
46 | var tl = new TimelineLite();
47 | 
48 | tl.to(el, 1, { backgroundColor: 'blue' });
49 | 
50 | tl.add(new ClipRect(el, {
51 |   from: ClipRect.TOP,
52 |   to: ClipRect.BOTTOM,
53 |   duration: 1,
54 |   reverse: true,
55 |   clearProps: false
56 | }));
57 | 
58 | tl.add(new ClipRect(el, {
59 |   from: ClipRect.LEFT,
60 |   to: ClipRect.RIGHT,
61 |   duration: 1
62 | }));
63 | 
64 | tl.add(new ClipRect(el, {
65 |   from: ClipRect.TOP,
66 |   to: ClipRect.BOTTOM,
67 |   reverse: true,
68 |   clearProps: false
69 | }));
70 | ```
71 | 
72 | ![example](http://i.imgur.com/19TFaQH.gif)
73 | 
74 | 


--------------------------------------------------------------------------------
/demo/simple.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       body, html {
 6 |         padding: 0;
 7 |         margin: 0;
 8 |       }
 9 | 
10 |       .box {
11 |         height: 300px;
12 |         width: 300px;
13 |         background: red;
14 |         position: absolute;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 | 
20 |     <div id="box" class="box">
21 | 
22 |     </div>
23 | 
24 |   </body>
25 | 
26 |   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
27 |   <script type="text/javascript" src="../index.js"></script>
28 | 
29 |   <script>
30 |     var el = document.getElementById('box');
31 | 
32 |     new ClipRect(el, {
33 |       duration: 0,
34 |       clearProps: false,
35 |       reverse: true
36 |     });
37 | 
38 |     window.setTimeout(function() {
39 |       new ClipRect(el, {
40 |         from: ClipRect.TOP,
41 |         to: ClipRect.BOTTOM
42 |       });
43 |     }, 3000);
44 | 
45 |     window.setTimeout(function() {
46 |       new ClipRect(el, {
47 |         from: ClipRect.RIGHT,
48 |         to: ClipRect.LEFT,
49 |         duration: 1,
50 |         reverse: true,
51 |         clearProps: false
52 |       });
53 |     }, 4000);
54 | 
55 |   </script>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/demo/timeline.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       body, html {
 6 |         padding: 0;
 7 |         margin: 0;
 8 |       }
 9 | 
10 |       .box {
11 |         height: 300px;
12 |         width: 300px;
13 |         background: red;
14 |         position: absolute;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 | 
20 |     <div id="box" class="box">
21 | 
22 |     </div>
23 | 
24 |   </body>
25 | 
26 |   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
27 |   <script type="text/javascript" src="../index.js"></script>
28 | 
29 |   <script>
30 |     var el = document.getElementById('box');
31 |     var tl = new TimelineLite();
32 | 
33 |     tl.to(el, 1, { backgroundColor: 'blue' });
34 | 
35 |     tl.add(new ClipRect(el, {
36 |       from: ClipRect.TOP,
37 |       to: ClipRect.BOTTOM,
38 |       duration: 1,
39 |       reverse: true,
40 |       clearProps: false
41 |     }));
42 | 
43 |     tl.add(new ClipRect(el, {
44 |       from: ClipRect.LEFT,
45 |       to: ClipRect.RIGHT,
46 |       duration: 1
47 |     }));
48 | 
49 |     tl.add(new ClipRect(el, {
50 |       from: ClipRect.TOP,
51 |       to: ClipRect.BOTTOM,
52 |       reverse: true,
53 |       clearProps: false
54 |     }));
55 | 
56 |   </script>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | (function (root, factory) {
  2 |   if (typeof define === 'function' && define.amd) {
  3 |     define([], factory);
  4 |   } else if (typeof module === 'object' && module.exports) {
  5 |     module.exports = factory();
  6 |   } else {
  7 |     root.ClipRect = factory();
  8 |   }
  9 | }(this, function () {
 10 |   var ClipRect = function(el, obj) {
 11 |     if (typeof TweenLite === 'undefined') {
 12 |       return console.error('need GSAP to work.');
 13 |     }
 14 | 
 15 |     this.el = el;
 16 |     this.vars = this.extend({
 17 |       duration: 0.4,
 18 |       ease: TweenLite.defaultEase,
 19 |       from: ClipRect.RIGHT,
 20 |       to: ClipRect.LEFT,
 21 |       clearProps: true,
 22 |       reverse: false
 23 |     }, obj);
 24 | 
 25 |     this.isStarted = false;
 26 | 
 27 |     return this.tween();
 28 |   };
 29 | 
 30 |   ClipRect.TOP = 1;
 31 |   ClipRect.RIGHT = 2;
 32 |   ClipRect.BOTTOM = 3;
 33 |   ClipRect.LEFT = 4;
 34 | 
 35 |   ClipRect.prototype.extend = function(a, b) {
 36 |     for(var key in b) {
 37 |       if(b.hasOwnProperty(key)) {
 38 |         a[key] = b[key];
 39 |       }
 40 |     }
 41 | 
 42 |     return a;
 43 |   };
 44 | 
 45 |   ClipRect.prototype.getSize = function() {
 46 |     if (this.bounding) {
 47 |       return this.bounding;
 48 |     }
 49 | 
 50 |     this.bounding = this.el.getBoundingClientRect();
 51 |     return this.bounding;
 52 |   };
 53 | 
 54 |   ClipRect.prototype.getRect = function(end) {
 55 |     end = end || false;
 56 | 
 57 |     if (this.vars.reverse) {
 58 |       end = !end;
 59 |     }
 60 | 
 61 |     var c = {
 62 |       top: 0,
 63 |       right: 0,
 64 |       bottom: 0,
 65 |       left: 0
 66 |     };
 67 | 
 68 |     var s = this.getSize();
 69 | 
 70 |     if (this.vars.from === ClipRect.TOP && this.vars.to === ClipRect.BOTTOM) {
 71 |       c.right = s.width;
 72 | 
 73 |       if (end) {
 74 |         c.bottom = s.height;
 75 |       }
 76 |     }
 77 | 
 78 |     if (this.vars.from === ClipRect.BOTTOM && this.vars.to === ClipRect.TOP) {
 79 |       c.top = s.height;
 80 |       c.right = s.width;
 81 |       c.bottom = s.height;
 82 | 
 83 |       if (end) {
 84 |         c.top = 0;
 85 |       }
 86 |     }
 87 | 
 88 |     if (this.vars.from === ClipRect.RIGHT && this.vars.to === ClipRect.LEFT) {
 89 |       c.right = s.width;
 90 |       c.bottom = s.height;
 91 |       c.left = s.width;
 92 | 
 93 |       if (end) {
 94 |         c.left = 0;
 95 |       }
 96 |     }
 97 | 
 98 |     if (this.vars.from === ClipRect.LEFT && this.vars.to === ClipRect.RIGHT) {
 99 |       c.bottom = s.height;
100 | 
101 |       if (end) {
102 |         c.right = s.width;
103 |       }
104 |     }
105 | 
106 |     return 'rect(' + c.top + 'px ' + c.right + 'px ' + c.bottom + 'px ' + c.left + 'px)';
107 |   };
108 | 
109 |   ClipRect.prototype.prepare = function() {
110 |     this.el.style.clip = this.getRect();
111 |   };
112 | 
113 |   ClipRect.prototype.tween = function() {
114 |     var _this = this;
115 | 
116 |     return TweenLite.to({}, this.vars.duration, {
117 |       onUpdate: function() {
118 |         // Using onUpdate because onStart
119 |         // is not called if the tween is 0 duration.
120 |         if (this.isStarted) {
121 |           return;
122 |         }
123 | 
124 |         this.isStarted = true;
125 |         this.prepare();
126 | 
127 |         TweenLite.to(this.el, this.vars.duration, {
128 |           ease: this.vars.ease,
129 |           clip: this.getRect(true),
130 |           immediateRender: true,
131 |           onComplete: function() {
132 |             this.vars.clearProps && this.clear();
133 |           },
134 |           onCompleteScope: this
135 |         });
136 |       },
137 |       onUpdateScope: _this,
138 |     });
139 |   };
140 | 
141 |   ClipRect.prototype.clear = function() {
142 |     this.el.style.clip = 'auto';
143 |   };
144 | 
145 |   return ClipRect;
146 | }));
147 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "clip-rect",
 3 |   "version": "1.2.0",
 4 |   "description": "Helper to create clip rect animation with gsap",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/luruke/clip-rect.git"
12 |   },
13 |   "keywords": [
14 |     "clip",
15 |     "rect",
16 |     "gasp",
17 |     "animation",
18 |     "tween"
19 |   ],
20 |   "author": "@luruke",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/luruke/clip-rect/issues"
24 |   },
25 |   "homepage": "https://github.com/luruke/clip-rect"
26 | }
27 | 


--------------------------------------------------------------------------------