@atlaskit/motion - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

CHANGELOG.md

 # @atlaskit/motion
 
+## 0.3.0
+
+### Minor Changes
+
+- [`dd275c9b81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd275c9b81) - Added the option to animate opacity within `SlideIn`.
+
+  You can now add the property `animateOpacity` which if true, animates the opacity from 0 -> 1 on enter and 1 -> 0 on exit.
+
 ## 0.2.6
@@ -4,0 +12,0 @@

dist/cjs/entering/keyframes-motion.js

@@ -12,3 +12,3 @@ "use strict";
 /**
- * Used to multipy the initial duration for exiting motions.
+ * Used to multiply the initial duration for exiting motions.
  */
@@ -15,0 +15,0 @@ var EXITING_MOTION_MULTIPLIER = 0.5;

dist/cjs/entering/slide-in.d.ts

@@ -5,4 +5,4 @@ import React from 'react';
 import { KeyframesMotionProps } from './keyframes-motion';
-import { Direction, Transition } from './types';
-export declare const slideInAnimation: (from: Direction, state: Transition) => ObjectInterpolation<undefined>;
+import { Direction, Fade, Transition } from './types';
+export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => ObjectInterpolation<undefined>;
 export interface SlideInProps extends KeyframesMotionProps {
@@ -12,3 +12,3 @@ /**
      * E.g. `"right"` will slide in from the right to the left.
-     *
+  
      * If `exitTo` is not set, exiting will reverse this motion.
@@ -21,3 +21,3 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
      * E.g. `"right"` will slide out to the right.
-     *
+  
      * If this is not set, exiting will reverse the entrance motion.
@@ -28,2 +28,11 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
     /**
+     * Whether an element will fade on enter, on exit or both.
+  
+     * `'none'` is the default and will cause the element to not fade,
+     * `'in'` will cause the element to fade on enter,
+     * `'out'` will cause the element to fade on exit,
+     * `'inout'` will cause the element to fade on both
+     */
+    fade?: Fade;
+    /**
      * A custom function used to override the default animation timings.
@@ -30,0 +39,0 @@ * Returns which animation curve to use depending on the current transitioning state.

dist/cjs/entering/slide-in.js

@@ -8,3 +8,3 @@ "use strict";
 var keyframes_motion_1 = tslib_1.__importDefault(require("./keyframes-motion"));
-exports.slideInAnimation = function (from, state) {
+exports.slideInAnimation = function (from, state, fade) {
     var _a;
@@ -19,8 +19,13 @@ var initial = state === 'entering' ? '0%' : '100%';
     };
+    var animateOpacity = fade === 'inout' ||
+        (fade === 'in' && state === 'entering') ||
+        (fade === 'out' && state === 'exiting');
     return _a = {},
         _a[initial] = {
             transform: fromMap[from],
+            opacity: animateOpacity ? 0 : 1,
         },
         _a[end] = {
             transform: 'none',
+            opacity: 1,
         },
@@ -30,6 +35,6 @@ _a;
 var SlideIn = function (_a) {
-    var children = _a.children, enterFrom = _a.enterFrom, exitTo = _a.exitTo, _b = _a.duration, duration = _b === void 0 ? durations_1.mediumDurationMs : _b, _c = _a.animationTimingFunction, animationTimingFunction = _c === void 0 ? function (state) { return (state === 'entering' ? curves_1.easeOut : curves_1.easeIn); } : _c, props = tslib_1.__rest(_a, ["children", "enterFrom", "exitTo", "duration", "animationTimingFunction"]);
-    return (react_1.default.createElement(keyframes_motion_1.default, tslib_1.__assign({ duration: duration, enteringAnimation: exports.slideInAnimation(enterFrom, 'entering'), exitingAnimation: exports.slideInAnimation(exitTo || enterFrom, 'exiting'), animationTimingFunction: animationTimingFunction }, props), children));
+    var children = _a.children, enterFrom = _a.enterFrom, exitTo = _a.exitTo, _b = _a.fade, fade = _b === void 0 ? 'none' : _b, _c = _a.duration, duration = _c === void 0 ? durations_1.mediumDurationMs : _c, _d = _a.animationTimingFunction, animationTimingFunction = _d === void 0 ? function (state) { return (state === 'entering' ? curves_1.easeOut : curves_1.easeIn); } : _d, props = tslib_1.__rest(_a, ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"]);
+    return (react_1.default.createElement(keyframes_motion_1.default, tslib_1.__assign({ duration: duration, enteringAnimation: exports.slideInAnimation(enterFrom, 'entering', fade), exitingAnimation: exports.slideInAnimation(exitTo || enterFrom, 'exiting', fade), animationTimingFunction: animationTimingFunction }, props), children));
 };
 exports.default = SlideIn;
 //# sourceMappingURL=slide-in.js.map

dist/cjs/entering/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react" />
 /**
+ * Whether an element will fade on enter, on exit or both
+ */
+export declare type Fade = 'none' | 'in' | 'out' | 'inout';
+/**
  * Common props all entering motions should make available for consumers.
@@ -13,0 +17,0 @@ */

dist/cjs/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.6",
+	"version": "0.3.0",
 	"sideEffects": false
 }

dist/es2019/entering/keyframes-motion.js

@@ -9,3 +9,3 @@ import React, { useEffect, useState } from 'react';
 /**
- * Used to multipy the initial duration for exiting motions.
+ * Used to multiply the initial duration for exiting motions.
  */
@@ -12,0 +12,0 @@ const EXITING_MOTION_MULTIPLIER = 0.5;

dist/es2019/entering/slide-in.d.ts

@@ -5,4 +5,4 @@ import React from 'react';
 import { KeyframesMotionProps } from './keyframes-motion';
-import { Direction, Transition } from './types';
-export declare const slideInAnimation: (from: Direction, state: Transition) => ObjectInterpolation<undefined>;
+import { Direction, Fade, Transition } from './types';
+export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => ObjectInterpolation<undefined>;
 export interface SlideInProps extends KeyframesMotionProps {
@@ -12,3 +12,3 @@ /**
      * E.g. `"right"` will slide in from the right to the left.
-     *
+  
      * If `exitTo` is not set, exiting will reverse this motion.
@@ -21,3 +21,3 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
      * E.g. `"right"` will slide out to the right.
-     *
+  
      * If this is not set, exiting will reverse the entrance motion.
@@ -28,2 +28,11 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
     /**
+     * Whether an element will fade on enter, on exit or both.
+  
+     * `'none'` is the default and will cause the element to not fade,
+     * `'in'` will cause the element to fade on enter,
+     * `'out'` will cause the element to fade on exit,
+     * `'inout'` will cause the element to fade on both
+     */
+    fade?: Fade;
+    /**
      * A custom function used to override the default animation timings.
@@ -30,0 +39,0 @@ * Returns which animation curve to use depending on the current transitioning state.

dist/es2019/entering/slide-in.js

@@ -5,3 +5,3 @@ import React from 'react';
 import KeyframesMotion from './keyframes-motion';
-export const slideInAnimation = (from, state) => {
+export const slideInAnimation = (from, state, fade) => {
     const initial = state === 'entering' ? '0%' : '100%';
@@ -15,15 +15,20 @@ const end = state === 'entering' ? '100%' : '0%';
     };
+    const animateOpacity = fade === 'inout' ||
+        (fade === 'in' && state === 'entering') ||
+        (fade === 'out' && state === 'exiting');
     return {
         [initial]: {
             transform: fromMap[from],
+            opacity: animateOpacity ? 0 : 1,
         },
         [end]: {
             transform: 'none',
+            opacity: 1,
         },
     };
 };
-const SlideIn = ({ children, enterFrom, exitTo, duration = mediumDurationMs, animationTimingFunction = state => (state === 'entering' ? easeOut : easeIn), ...props }) => {
-    return (React.createElement(KeyframesMotion, Object.assign({ duration: duration, enteringAnimation: slideInAnimation(enterFrom, 'entering'), exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting'), animationTimingFunction: animationTimingFunction }, props), children));
+const SlideIn = ({ children, enterFrom, exitTo, fade = 'none', duration = mediumDurationMs, animationTimingFunction = state => (state === 'entering' ? easeOut : easeIn), ...props }) => {
+    return (React.createElement(KeyframesMotion, Object.assign({ duration: duration, enteringAnimation: slideInAnimation(enterFrom, 'entering', fade), exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting', fade), animationTimingFunction: animationTimingFunction }, props), children));
 };
 export default SlideIn;
 //# sourceMappingURL=slide-in.js.map

dist/es2019/entering/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react" />
 /**
+ * Whether an element will fade on enter, on exit or both
+ */
+export declare type Fade = 'none' | 'in' | 'out' | 'inout';
+/**
  * Common props all entering motions should make available for consumers.
@@ -13,0 +17,0 @@ */

dist/es2019/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.6",
+	"version": "0.3.0",
 	"sideEffects": false
 }

dist/esm/entering/keyframes-motion.js

@@ -10,3 +10,3 @@ import { __assign, __read } from "tslib";
 /**
- * Used to multipy the initial duration for exiting motions.
+ * Used to multiply the initial duration for exiting motions.
  */
@@ -13,0 +13,0 @@ var EXITING_MOTION_MULTIPLIER = 0.5;

dist/esm/entering/slide-in.d.ts

@@ -5,4 +5,4 @@ import React from 'react';
 import { KeyframesMotionProps } from './keyframes-motion';
-import { Direction, Transition } from './types';
-export declare const slideInAnimation: (from: Direction, state: Transition) => ObjectInterpolation<undefined>;
+import { Direction, Fade, Transition } from './types';
+export declare const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => ObjectInterpolation<undefined>;
 export interface SlideInProps extends KeyframesMotionProps {
@@ -12,3 +12,3 @@ /**
      * E.g. `"right"` will slide in from the right to the left.
-     *
+  
      * If `exitTo` is not set, exiting will reverse this motion.
@@ -21,3 +21,3 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
      * E.g. `"right"` will slide out to the right.
-     *
+  
      * If this is not set, exiting will reverse the entrance motion.
@@ -28,2 +28,11 @@ * E.g. if `enterFrom: "right"`, will slide out to the right.
     /**
+     * Whether an element will fade on enter, on exit or both.
+  
+     * `'none'` is the default and will cause the element to not fade,
+     * `'in'` will cause the element to fade on enter,
+     * `'out'` will cause the element to fade on exit,
+     * `'inout'` will cause the element to fade on both
+     */
+    fade?: Fade;
+    /**
      * A custom function used to override the default animation timings.
@@ -30,0 +39,0 @@ * Returns which animation curve to use depending on the current transitioning state.

dist/esm/entering/slide-in.js

@@ -6,3 +6,3 @@ import { __assign, __rest } from "tslib";
 import KeyframesMotion from './keyframes-motion';
-export var slideInAnimation = function (from, state) {
+export var slideInAnimation = function (from, state, fade) {
     var _a;
@@ -17,8 +17,13 @@ var initial = state === 'entering' ? '0%' : '100%';
     };
+    var animateOpacity = fade === 'inout' ||
+        (fade === 'in' && state === 'entering') ||
+        (fade === 'out' && state === 'exiting');
     return _a = {},
         _a[initial] = {
             transform: fromMap[from],
+            opacity: animateOpacity ? 0 : 1,
         },
         _a[end] = {
             transform: 'none',
+            opacity: 1,
         },
@@ -28,6 +33,6 @@ _a;
 var SlideIn = function (_a) {
-    var children = _a.children, enterFrom = _a.enterFrom, exitTo = _a.exitTo, _b = _a.duration, duration = _b === void 0 ? mediumDurationMs : _b, _c = _a.animationTimingFunction, animationTimingFunction = _c === void 0 ? function (state) { return (state === 'entering' ? easeOut : easeIn); } : _c, props = __rest(_a, ["children", "enterFrom", "exitTo", "duration", "animationTimingFunction"]);
-    return (React.createElement(KeyframesMotion, __assign({ duration: duration, enteringAnimation: slideInAnimation(enterFrom, 'entering'), exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting'), animationTimingFunction: animationTimingFunction }, props), children));
+    var children = _a.children, enterFrom = _a.enterFrom, exitTo = _a.exitTo, _b = _a.fade, fade = _b === void 0 ? 'none' : _b, _c = _a.duration, duration = _c === void 0 ? mediumDurationMs : _c, _d = _a.animationTimingFunction, animationTimingFunction = _d === void 0 ? function (state) { return (state === 'entering' ? easeOut : easeIn); } : _d, props = __rest(_a, ["children", "enterFrom", "exitTo", "fade", "duration", "animationTimingFunction"]);
+    return (React.createElement(KeyframesMotion, __assign({ duration: duration, enteringAnimation: slideInAnimation(enterFrom, 'entering', fade), exitingAnimation: slideInAnimation(exitTo || enterFrom, 'exiting', fade), animationTimingFunction: animationTimingFunction }, props), children));
 };
 export default SlideIn;
 //# sourceMappingURL=slide-in.js.map

dist/esm/entering/types.d.ts

@@ -11,2 +11,6 @@ /// <reference types="react" />
 /**
+ * Whether an element will fade on enter, on exit or both
+ */
+export declare type Fade = 'none' | 'in' | 'out' | 'inout';
+/**
  * Common props all entering motions should make available for consumers.
@@ -13,0 +17,0 @@ */

dist/esm/version.json

 {
 	"name": "@atlaskit/motion",
-	"version": "0.2.6",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/motion",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Atlassian motion variables, components and more.",
@@ -19,2 +19,3 @@ "publishConfig": {
     "team": "Design System Team",
+    "inPublicMirror": true,
     "releaseModel": "scheduled",
@@ -21,0 +22,0 @@ "website": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

222983

increased by1.55%

Lines of code

3244

increased by1.41%

No dependency changes