Permalink
Browse files

Working in progress

  • Loading branch information...
1 parent 9bee6da commit acd22ffa31fa1ada9ecc958b5a92e3eb5fc71e9c @henriquea committed Mar 1, 2016
Showing with 64 additions and 653 deletions.
  1. +0 −1 .eslintrc
  2. +3 −1 CHANGELOG.md
  3. +7 −4 CONTRIBUTING.md
  4. +3 −2 README.md
  5. +0 −206 examples/advance-animation.html
  6. +0 −178 examples/basic-animation.html
  7. +5 −9 examples/basic.html
  8. +0 −176 examples/responsive.html
  9. +1 −1 package.json
  10. +45 −75 src/index.js
View
@@ -8,7 +8,6 @@
"strict": 0,
"quotes": [2, "single"],
"no-underscore-dangle": 0,
- "no-unused-vars": 1,
"no-unused-expressions": 0,
"new-cap": 0,
"no-extra-boolean-cast": 0,
View
@@ -1,5 +1,7 @@
# CHANGELOG
+### v3.0.0
+
### v2.2.0
- Add containerLoaded and itemLoaded options #37
@@ -40,4 +42,4 @@ The same happens for each grid child item when it is ready for use.
<div class="grid grid--loaded">
<div class="grid-item grid-item--loaded">
</div>
-```
+```
View
@@ -1,12 +1,15 @@
**Be nice** 😎
-Bare in mind that minigrid's main concept is simplicity. The goal is to keep the API always at 2kb. Bug fixes are more than welcome! For any new feature please [submit an issue](https://github.com/henriquea/minigrid/issues) first before send any pull request.
+Bare in mind that minigrid's main concept is simplicity. The goal is to keep
+the API always at 2kb. Bug fixes are more than welcome! For any new feature
+please [submit an issue](https://github.com/henriquea/minigrid/issues) first
+before send any pull request.
-Thank you all! 🍺
+🍺
## Tests
-All commits need pass the tests `npm run test`.
+All commits must pass the tests `npm run test`.
Install browserify and testling globally.
@@ -18,4 +21,4 @@ $ npm install testling -g
## Build
-The build task `npm run build` runs the tests and does the minification.
+The build task `npm run build` runs the tests and does the minification.
View
@@ -6,12 +6,13 @@ Website & Documentation: [http://alves.im/minigrid](http://alves.im/minigrid/).
## Limitations
-Minigrid was built having in mind "cards" with same width and different heights. If your cards have different width sizes or you need more control I'd recommend [Isotope](http://isotope.metafizzy.co).
+Minigrid was built having in mind "cards" with same width and different heights.
+If your cards have different width sizes or you need more control I'd recommend [Isotope](http://isotope.metafizzy.co).
## Contributing
Plese see [CONTRIBUTING](CONTRIBUTING.md).
## License
-MIT &copy; 2015 [Henrique Alves](http://alves.im)
+MIT &copy; 2016 [Henrique Alves](http://alves.im)
@@ -1,206 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
-
- <meta charSet="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <title>Minigrid advance animation example</title>
-
- <link rel="stylesheet" type="text/css" href="styles.css">
-
- <style type="text/css">
- .cards {
- margin: auto; /* center grid */
- }
-
- .card {
- width: 200px;
- overflow: hidden;
- opacity: 0; /* hide card while loading */
- transform-property: opacity, transform;
- transform-origin: 50%;
- }
-
- /* change card size for small screens */
- @media (max-width: 600px) {
- .card { width: 156px; }
- }
- </style>
-
- </head>
-
- <body>
-
- <div class="demo">
-
- <div class="cards">
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/2a/30/13/2a3013448eb806e51da5de96eb38cf36.jpg" />
- </div>
- <div class="card-info">
- Villetta Barrea and Scanno, Abruzzo, Italy
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/fa/a2/41/faa24120c4689443e2169366972cb194.jpg" />
- </div>
- <div class="card-info">
- Vøringfossen, Norway
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/f9/06/4c/f9064c91a4f63705e5a4408cda6739de.jpg" />
- </div>
- <div class="card-info">
- Theogefiro, Zitsa, Greece
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/ab/e2/1b/abe21b2f3a5be204cb2436d0b9cc6a1d.jpg" />
- </div>
- <div class="card-info">
- Los Andes, Argentina
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/7f/20/c5/7f20c589a41bffc8c0b8960fc8001160.jpg" />
- </div>
- <div class="card-info">
- Moon Mountain, Yangshuo, Guangxi, China
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/54/a0/e0/54a0e0acf60f33f9b64528bd364ce5d6.jpg" />
- </div>
- <div class="card-info">
- Valley of the Ten Peaks, Moraine Lake, Canada
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/d2/d5/aa/d2d5aa40108038f92d4cb0edca78ec26.jpg" />
- </div>
- <div class="card-info">
- Hawaii
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/f7/e2/c0/f7e2c018f5ec39a83df831495ed9cad5.jpg" />
- </div>
- <div class="card-info">
- Chichimilá, Yucatan, Mexico
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/a7/51/a9/a751a9a163c76ea37eba4747c35d1940.jpg" />
- </div>
- <div class="card-info">
- Basalt Pinnacles, Scotland
- </div>
- </div>
- </div>
-
- <div class="card">
- <div class="card-wrapper">
- <div class="card-image">
- <img src="https://s-media-cache-ak0.pinimg.com/236x/d9/86/6b/d9866b911c08387bc8ab17a6c9897e85.jpg" />
- </div>
- <div class="card-info">
- Somewhere, Iceland
- </div>
- </div>
- </div>
-
- </div>
-
- </div>
- <script src="https://cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
- <script src="../src/index.js"></script>
- <script>
- (function(){
-
- function grid(isWindowResizing) {
-
- minigrid({
- container: '.cards',
- item: '.card',
- gutter: 6,
- animate: function(el, x, y, index) {
- // set a different delay value for each item to make sure they don't show
- // all in the same time
- var delay = 100 + index * 30;
- var initialDelay = isWindowResizing ? 0 : 500;
- // first lets set the item position without animate it
- Velocity(el, {
- translateX: x + 'px',
- translateY: y + 'px',
- translateZ: 0
- }, {
- duration: 0,
- delay: initialDelay,
- complete: function() {
- // if the window is resizing just set the item position and return
- if (isWindowResizing) {
- return;
- }
- // now we can animate, in this case the opacity and scale
- Velocity(el, {
- opacity: [1, 0],
- scale: [1, 0.9],
- }, {
- duration: 300,
- easing: [.4,.2,.5,1.4],
- delay: delay
- });
- }
- });
- }
- });
- }
-
- window.addEventListener('resize', function(){
- grid(true);
- });
-
- grid();
-
- })();
- </script>
-
- </body>
-
-</html>
Oops, something went wrong.

0 comments on commit acd22ff

Please sign in to comment.