add hack packs

argyleink · Jul 31, 2020 · 29072a1 · 29072a1
1 parent 4d22e85
commit 29072a1
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -18,11 +18,17 @@
 **CDN**  
 Latest at `https://unpkg.com/transition-style`  
 
-Or go minimal, import individual category bundles
+Or import individual category bundles
   - `https://unpkg.com/transition-style/transition.circles.min.css`
   - `https://unpkg.com/transition-style/transition.squares.min.css`
   - `https://unpkg.com/transition-style/transition.polygons.min.css`
   - `https://unpkg.com/transition-style/transition.wipes.min.css`
+
+Or go slim & custom -> import the `hackpack`
+  - `https://unpkg.com/transition-style/transition.hackpack.min.css`
+  - Create a custom `@keyframe` animation with the imported custom properties. 
+
+> Custom properties ship with the `transition.min.css` as well.
   
 <br><br>
 
@@ -39,6 +45,37 @@ After `transition.css` has been added to your project, add an attribute to an el
 </div>
 ```
 
+#### Custom
+Go off the rails and build your own transitions with the custom props that ship with the each bundle. There's even the `hackpack` which is exclusively the custom props 🤘💀
+
+Most of the built in transitions are from the center. Here's how you can set the `from` transition to somewhere custom. This is also the animation used on page load for [transition.style](https://transition.style).
+
+```css
+@keyframes circle-swoop {
+  from {
+    clip-path: var(--circle-top-right-out);
+  }
+  to {
+    clip-path: var(--circle-bottom-right-in);
+  }
+}
+
+[transition="in:custom:circle-swoop"] {
+  --transition__duration: 1s;
+  animation-name: circle-swoop;
+}
+```
+
+Then, in the HTML:
+
+```html
+<div transition="in:custom:circle-swoop">
+  A custom transitioned element
+</div>
+```
+
+- The only rule is that you must transition from the same type of shapes
+
 #### Play
 Play and experiment with [this Codepen](https://codepen.io/argyleink/pen/RwrzGJb)
 

diff --git a/app/css/index.css b/app/css/index.css
@@ -18,3 +18,17 @@
     --brand: lch(57 56 273)
   }
 }
+
+@keyframes circle-swoop {
+  from {
+    clip-path: var(--circle-top-right-out);
+  }
+  to {
+    clip-path: var(--circle-bottom-right-in);
+  }
+}
+
+[transition="in:custom:circle-swoop"] {
+  --transition__duration: 5s;
+  animation-name: circle-swoop;
+}
diff --git a/app/index.html b/app/index.html
@@ -15,7 +15,7 @@
   </head>
   <body>
 
-    <section transition="in:circle:top-left">
+    <section transition="in:custom:circle-swoop">
       <header>
         <h1>
           <span>transition</span>
@@ -32,7 +32,7 @@ <h1>
         <optgroup label="Circle Entrances">
           <option>in:circle:center</option>
           <option>in:circle:top-right</option>
-          <option selected>in:circle:top-left</option>
+          <option>in:circle:top-left</option>
           <option>in:circle:bottom-right</option>
           <option>in:circle:bottom-left</option>
         </optgroup>
@@ -92,7 +92,7 @@ <h3>Circles</h3>
         <dt>Entrances</dt>
         <dd><a href="#">in:circle:center</a></dd>
         <dd><a href="#">in:circle:top-right</a></dd>
-        <dd selected><a href="#" autofocus>in:circle:top-left</a></dd>
+        <dd><a href="#">in:circle:top-left</a></dd>
         <dd><a href="#">in:circle:bottom-right</a></dd>
         <dd><a href="#">in:circle:bottom-left</a></dd>
 
@@ -157,6 +157,7 @@ <h3>Polygons</h3>
 
       <hr>
 
+      <a href="https://github.com/argyleink/transition.css#custom">Customize ↗</a>
       <a href="https://github.com/argyleink/transition.css/issues/new">Suggest a transition ↗</a>
       <a href="https://github.com/argyleink/transition.css">Contribute ↗</a>
 

diff --git a/app/js/index.js b/app/js/index.js
@@ -2,12 +2,9 @@ import $ from 'blingblingjs'
 
 const $demo = $('section')
 
-const [selected] = $('dd').filter(d => 
-  d.textContent === 'in:circle:top-left')
-
 const state = {
-  transition: 'in:circle:top-left',
-  selected,
+  transition: 'in:custom:circle-swoop',
+  selected: null,
 }
 
 const update = transition => {
@@ -33,7 +30,7 @@ $demo.on('click', e => {
 $('dd').on('click', e => {
   let transition = e.currentTarget.textContent
 
-  state.selected.removeAttribute('selected')
+  state.selected?.removeAttribute('selected')
   e.currentTarget.setAttribute('selected', true)
   state.selected = e.currentTarget
 

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "lib:circles": "postcss src/circles/index.css -c src -o transition.circles.min.css",
     "lib:squares": "postcss src/squares/index.css -c src -o transition.squares.min.css",
     "lib:polygons": "postcss src/polygons/index.css -c src -o transition.polygons.min.css",
+    "lib:hackpack": "postcss src/hackpack.css -c src -o transition.hackpack.min.css",
     "start": "concurrently --kill-others npm:dev:*",
     "bundle": "concurrently --kill-others npm:lib:*",
     "production": "npm run build && npm run prod:server"

diff --git a/src/hackpack.css b/src/hackpack.css
@@ -0,0 +1,2 @@
+@import "_vars";
+@import "_base";
diff --git a/transition.hackpack.min.css b/transition.hackpack.min.css
diff --git a/transition.min.css b/transition.min.css
diff --git a/transition.polygons.min.css b/transition.polygons.min.css