Updated animation timings

no refs.
- removed double trigger of in-popup notifications
- adjusted timing and easing for both in-popup and global notifications

ghost/portal/src/App.js

@@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'signup'
+    page: 'accountHome'
 };
 export default class App extends React.Component {
     constructor(props) {

ghost/portal/src/actions.js

@@ -211,7 +211,7 @@ async function updateNewsletter({data, state, api}) {
             action,
             member: member,
             popupNotification: createPopupNotification({
-                type: action, autoHide: true, duration: 2000, closeable: true, state, status: 'success',
+                type: action, autoHide: true, closeable: true, state, status: 'success',
                 message: 'Email newsletter settings updated'
             })
         };
@@ -319,7 +319,7 @@ async function updateProfile({data, state, api}) {
         action: 'updateProfile:success',
         page: 'accountHome',
         popupNotification: createPopupNotification({
-            type: 'updateProfile:success', autoHide: true, duration: 2000, closeable: true, status: 'success', state,
+            type: 'updateProfile:success', autoHide: true, closeable: true, status: 'success', state,
             message: 'Account details updated successfully'
         })
     };

ghost/portal/src/components/Frame.styles.js

@@ -252,7 +252,7 @@ const FrameStyles = `
     }
 
     .gh-portal-container-narrow {
-        width: 388px;
+        width: 380px;
     }
 
     .gh-portal-popup-container.preview {

ghost/portal/src/components/Notification.js

@@ -114,7 +114,7 @@ class NotificationContent extends React.Component {
     }
 
     componentDidMount() {
-        const {autoHide, duration = 2000} = this.props;
+        const {autoHide, duration = 2400} = this.props;
         const {showPopup} = this.context;
         if (showPopup) {
             this.setState({

ghost/portal/src/components/Notification.styles.js

@@ -23,11 +23,11 @@ const NotificationStyles = `
         color: var(--white);
         border-radius: 5px;
         box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.08);
-        animation: notification-slidein 0.7s ease-in-out;
+        animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000);
     }
 
     .gh-portal-notification.slideout {
-        animation: notification-slideout 0.6s ease-in-out;
+        animation: notification-slideout 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190);
     }
 
     .gh-portal-notification.hide {
@@ -94,25 +94,25 @@ const NotificationStyles = `
 
     @keyframes notification-slidein {
         0% { transform: translateX(380px); }
-        75% { transform: translateX(-8px); }
+        60% { transform: translateX(-6px); }
         100% { transform: translateX(0); }
     }
 
     @keyframes notification-slideout {
         0% { transform: translateX(0); }
-        25% { transform: translateX(-8px); }
+        30% { transform: translateX(-10px); }
         100% { transform: translateX(380px); }
     }
 
     @keyframes notification-slidein-mobile {
         0% { transform: translateY(-150px); }
-        75% { transform: translateY(8px); }
+        50% { transform: translateY(6px); }
         100% { transform: translateY(0); }
     }
 
     @keyframes notification-slideout-mobile {
         0% { transform: translateY(0); }
-        25% { transform: translateY(8px); }
+        35% { transform: translateY(6px); }
         100% { transform: translateY(-150px); }
     }
 
@@ -124,6 +124,7 @@ const NotificationStyles = `
         }
 
         .gh-portal-notification.slideout {
+            animation-duration: 0.55s;
             animation-name: notification-slideout-mobile;
         }
     }

ghost/portal/src/components/common/PopupNotification.js

@@ -25,7 +25,7 @@ export const PopupNotificationStyles = `
     }
 
     .gh-portal-popupnotification.slideout {
-        animation: popupnotification-slideout 0.6s ease-in-out;
+        animation: popupnotification-slideout 0.48s ease-in;
     }
 
     .gh-portal-popupnotification p {
@@ -144,8 +144,11 @@ export default class PopupNotification extends React.Component {
     }
 
     handlePopupNotification({popupNotification}) {
+        this.setState({
+            notificationCount: popupNotification.count
+        });
         if (popupNotification.autoHide) {
-            const {duration = 2400} = popupNotification;
+            const {duration = 2600} = popupNotification;
             this.timeoutId = setTimeout(() => {
                 this.setState((state) => {
                     if (state.className !== 'slideout') {
@@ -157,10 +160,6 @@ export default class PopupNotification extends React.Component {
                     return {};
                 });
             }, duration);
-        } else {
-            this.setState({
-                notificationCount: popupNotification.count
-            });
         }
     }
 

ghost/portal/src/utils/fixtures.js

@@ -15,7 +15,7 @@ export const site = {
     is_stripe_configured: true,
     portal_button: true,
     portal_name: true,
-    portal_plans: ['free', 'monthly', 'yearly'],
+    portal_plans: ['yearly'],
     portal_button_icon: 'icon-1',
     portal_button_signup_text: 'Subscribe now',
     portal_button_style: 'icon-and-text',