Merge pull request #103 from ncoden/feat/out-state-direction-defaults-83

feat: make transitions/effects directions depending on in/out state #83

docs/animations.md

@@ -177,7 +177,7 @@ Creates a hinge effect by rotating the element.
 - `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left)
 - `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge)
 - `perspective` (Number) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px)
-- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back)
+- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default**: `from-back` and `from-front` for `in` and `out` states respectively).
 
 
 ### shake()
@@ -196,7 +196,7 @@ Creates a sliding animation.
 **Parameters:**
 
 - `state` (Keyword) - Whether to move to (`in`) or from (`out`) the element's default position. (**Default:** in)
-- `direction` (Keyword) - Direction to move. Can be `up`, `down`, `left`, or `right`. (**Default:** up)
+- `direction` (Keyword) - Direction to move. Can be `up`, `down`, `left`, or `right`. (**Default:** `left` and `right` for `in` and `out` states respectively)
 - `amount` (Number) - Distance to move. Can be any CSS length unit. (**Default:** 100%)
 
 
@@ -206,7 +206,7 @@ Creates a spinning animation.
 
 **Parameters:**
 
-- `direction` (Keyword) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw)
+- `direction` (Keyword) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** `cw` and `ccw` for `in` and `out` states respectively)
 - `amount` (Number) - Amount to spin. Can be any CSS angle unit. (**Default:** 360deg)
 
 
@@ -225,6 +225,6 @@ Creates a scaling transition. A scale of `1` means the element is the same size.
 
 **Parameters:**
 
-- `from` (Number) - Size to start at. (**Default:** 1.5)
+- `from` (Number) - Size to start at. (**Default:** 0)
 - `to` (Number) - Size to end at. (**Default:** 1)
 

docs/transitions.md

@@ -41,8 +41,8 @@ Creates a fade transition by adjusting the opacity of the element.
 **Parameters:**
 
 - `state` (Keyword) - State to transition to. (**Default:** in)
-- `from` (Number) - Opacity to start at. Must be a number between 0 and 1. (**Default:** 0)
-- `to` (Number) - Opacity to end on. (**Default:** 1)
+- `from` (Number) - Opacity to start at. Must be a number between 0 and 1. (**Default:** `0` and `1` for `in` and `out` states respectively)
+- `to` (Number) - Opacity to end on. (**Default:** `1` and `0` for `in` and `out` states respectively)
 - `duration` (Keyword) - Length (speed) of the transition. (**Default:** null)
 - `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
 - `delay` (Duration) - Delay in seconds or milliseconds before the transition starts. (**Default:** null)
@@ -58,7 +58,7 @@ Creates a hinge transition by rotating the element.
 - `from` (Keyword) - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. (**Default:** left)
 - `axis` (Keyword) - Axis of the element to rotate on. Can be `edge` or `center`. (**Default:** edge)
 - `perspective` (Length) - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. (**Default:** 2000px)
-- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** from-back)
+- `turn-origin` (Keyword) - Side of the element to start the rotation from. Can be `from-back` or `from-front`. (**Default:** `from-back` and `from-front` for `in` and `out` states respectively)
 - `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true)
 - `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
 - `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)
@@ -72,7 +72,7 @@ Creates a sliding transition by translating the element horizontally or vertical
 **Parameters:**
 
 - `state` (Keyword) - State to transition to. (**Default:** in)
-- `direction` (Keyword) - Direction to slide to. Can be `up`, `right`, `down`, or `left`. (**Default:** left)
+- `direction` (Keyword) - Direction to slide to. Can be `up`, `right`, `down`, or `left`. (**Default:** `left` and `right` for `in` and `out` states respectively)
 - `amount` (Length) - Length of the slide as a percentage value. (**Default:** 100%)
 - `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false)
 - `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
@@ -87,7 +87,7 @@ Creates a spinning transition by rotating the element. The `turn` unit is used t
 **Parameters:**
 
 - `state` (Keyword) - State to transition to. (**Default:** in)
-- `direction` (Boolean) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** cw)
+- `direction` (Boolean) - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). (**Default:** `cw` and `ccw` for `in` and `out` states respectively)
 - `amount` (Number) - Amount to element the element. (**Default:** 0.75turn)
 - `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** false)
 - `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
@@ -102,8 +102,8 @@ Creates a scaling transition. A scale of `1` means the element is the same size.
 **Parameters:**
 
 - `state` (Keyword) - State to transition to. (**Default:** in)
-- `from` (Number) - Size to start at. (**Default:** 1.5)
-- `to` (Number) - Size to end at. (**Default:** 1)
+- `from` (Number) - Size to start at. (**Default:** `0` and `1` for `in` and `out` states respectively)
+- `to` (Number) - Size to end at. (**Default:** `1` and `0` for `in` and `out` states respectively)
 - `fade` (Boolean) - Set to `true` to fade the element in or out simultaneously. (**Default:** true)
 - `duration` (Duration) - Length (speed) of the transition. (**Default:** null)
 - `timing` (Keyword|Function) - Easing of the transition. (**Default:** null)

src/effects/_hinge.scss

@@ -3,13 +3,13 @@
 /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
 /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
 /// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
 @function hinge (
   $state: in,
   $from: left,
   $axis: edge,
   $perspective: 2000px,
-  $turn-origin: from-back
+  $turn-origin: null
 ) {
   // Rotation directions when hinging from back vs. front
   $rotation-amount: 90deg;
@@ -27,6 +27,7 @@
   );
 
   // Rotation origin
+  $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
   $rotation: '';
   @if $turn-origin == from-front {
     $rotation: map-get($rotations-from, $from);

src/effects/_slide.scss

@@ -1,16 +1,17 @@
 /// Creates a sliding animation.
 /// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
-/// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
+/// @param {Keyword} $direction [null] - Direction to move. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
 /// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
 /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
 @function slide(
   $state: in,
-  $direction: up,
+  $direction: null,
   $amount: 100%
 ) {
   $from: $amount;
   $to: 0;
   $func: 'translateY';
+  $direction: if($direction != null, $direction, if($state == in, left, right));
 
   @if $direction == left or $direction == right {
     $func: 'translateX';

src/effects/_spin.scss

@@ -1,14 +1,15 @@
 /// Creates a spinning animation.
-/// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
 /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
 /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
 @function spin(
   $state: in,
-  $direction: cw,
+  $direction: null,
   $amount: 1turn
 ) {
   $start: 0;
   $end: 0;
+  $direction: if($direction != null, $direction, if($state == in, cw, ccw));
 
   @if $state == in {
     $start: if($direction == ccw, $amount, $amount * -1);

src/effects/_zoom.scss

@@ -1,5 +1,5 @@
 /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
-/// @param {Number} $from [1.5] - Size to start at.
+/// @param {Number} $from [0] - Size to start at.
 /// @param {Number} $to [1] - Size to end at.
 @function zoom(
   $from: 0,

src/transitions/_fade.scss

@@ -1,18 +1,20 @@
 /// Creates a fade transition by adjusting the opacity of the element.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1.
-/// @param {Number} $to [1] - Opacity to end on.
+/// @param {Number} $from [null] - Opacity to start at. Must be a number between 0 and 1. By default `0` and `1` for `in` and `out` states respectively.
+/// @param {Number} $to [null] - Opacity to end on. By default `1` and `0` for `in` and `out` states respectively.
 /// @param {Keyword} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-fade(
   $state: in,
-  $from: 0,
-  $to: 1,
+  $from: null,
+  $to: null,
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $from: if($from != null, $from, if($state == in, 0, 1));
+  $to: if($to != null, $to, if($state == in, 1, 0));
   $fade: fade($from, $to);
 
   @include transition-start($state) {

src/transitions/_hinge.scss

@@ -3,7 +3,7 @@
 /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
 /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
 /// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
 /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
@@ -13,12 +13,13 @@
   $from: left,
   $axis: edge,
   $perspective: 2000px,
-  $turn-origin: from-back,
+  $turn-origin: null,
   $fade: map-get($motion-ui-settings, hinge-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
   $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
 
   @include transition-start($state) {

src/transitions/_slide.scss

@@ -1,20 +1,21 @@
 /// Creates a sliding transition by translating the element horizontally or vertically.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Keyword} $direction [left] - Direction to slide to. Can be `up`, `right`, `down`, or `left`.
+/// @param {Keyword} $direction [null] - Direction to slide to. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
 /// @param {Length} $amount [100%] - Length of the slide as a percentage value.
 /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-slide (
   $state: in,
-  $direction: left,
+  $direction: null,
   $amount: 100%,
   $fade: map-get($motion-ui-settings, slide-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $direction: if($direction != null, $direction, if($state == in, left, right));
   $slide: slide($state, $direction, $amount);
 
   // CSS Output

src/transitions/_spin.scss

@@ -1,6 +1,6 @@
 /// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
 /// @param {Number} $amount [0.75turn] - Amount to element the element.
 /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
@@ -15,6 +15,7 @@
   $timing: null,
   $delay: null
 ) {
+  $direction: if($direction != null, $direction, if($state == in, cw, ccw));
   $spin: spin($state, $direction, $amount);
 
   @include transition-start($state) {

src/transitions/_zoom.scss

@@ -1,20 +1,22 @@
 /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [1.5] - Size to start at.
-/// @param {Number} $from [1] - Size to end at.
+/// @param {Number} $from [null] - Size to start at. By default `0` and `1` for `in` and `out` states respectively.
+/// @param {Number} $from [null] - Size to end at. By default `1` and `0` for `in` and `out` states respectively.
 /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.
 /// @param {Keyword|Function} $timing [null] - Easing of the transition.
 /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
 @mixin mui-zoom(
   $state: in,
-  $from: 1.5,
-  $to: 1,
+  $from: null,
+  $to: null,
   $fade: map-get($motion-ui-settings, scale-and-fade),
   $duration: null,
   $timing: null,
   $delay: null
 ) {
+  $from: if($from != null, $from, if($state == in, 0, 1));
+  $to: if($to != null, $to, if($state == in, 1, 0));
   $scale: zoom($from, $to);
 
   @include transition-start($state) {