Merge pull request #137 from storytold/bflat-fakeyou-anim-update

ainmation improvements

packages/fakeyou.com/src/App.tsx

@@ -158,7 +158,8 @@ class App extends React.Component<Props, State> {
       migrationMode: migrationMode,
 
       sessionWrapper: SessionWrapper.emptySession(),
-      sessionSubscriptionsWrapper: SessionSubscriptionsWrapper.emptySubscriptions(),
+      sessionSubscriptionsWrapper:
+        SessionSubscriptionsWrapper.emptySubscriptions(),
 
       isShowingVocodesNotice: props.flashVocodesNotice,
 
@@ -220,7 +221,8 @@ class App extends React.Component<Props, State> {
   };
 
   querySessionSubscriptions = async () => {
-    const sessionSubscriptionsWrapper = await SessionSubscriptionsWrapper.lookupActiveSubscriptions();
+    const sessionSubscriptionsWrapper =
+      await SessionSubscriptionsWrapper.lookupActiveSubscriptions();
     this.setState({
       sessionSubscriptionsWrapper: sessionSubscriptionsWrapper,
     });
@@ -640,8 +642,6 @@ class App extends React.Component<Props, State> {
           <div className="animation-wrapper">
             <div className="particle particle-1"></div>
             <div className="particle particle-2"></div>
-            <div className="particle particle-3"></div>
-            <div className="particle particle-4"></div>
           </div>
 
           <div id="viewable">
@@ -659,8 +659,12 @@ class App extends React.Component<Props, State> {
                   <PageContainer
                     sessionWrapper={this.state.sessionWrapper}
                     querySessionAction={this.querySession}
-                    sessionSubscriptionsWrapper={this.state.sessionSubscriptionsWrapper}
-                    querySessionSubscriptionsAction={this.querySessionSubscriptions}
+                    sessionSubscriptionsWrapper={
+                      this.state.sessionSubscriptionsWrapper
+                    }
+                    querySessionSubscriptionsAction={
+                      this.querySessionSubscriptions
+                    }
                     isShowingVocodesNotice={this.state.isShowingVocodesNotice}
                     clearVocodesNotice={this.clearVocodesNotice}
                     isShowingLangaugeNotice={this.state.isShowingLanguageNotice}

packages/fakeyou.com/src/AppNew.scss

@@ -84,50 +84,10 @@ $headings-font-family: "Merriweather", serif;
     overflow: hidden;
 
     &.low-spec {
-      .particle-1 {
-        animation: animParticle $time-1 linear infinite;
-        @include particles(0);
-        height: 7px;
-        width: 7px;
-      }
-
-      .particle-1:after {
-        @include particles(0);
-        height: 8px;
-        width: 8px;
-      }
-
-      .particle-2 {
-        animation: animParticle $time-2 linear infinite;
-        @include particles(0);
-        height: 5px;
-        width: 5px;
-      }
-
-      .particle-2:after {
-        @include particles(0);
-        height: 5px;
-        width: 5px;
-      }
-
-      // .particle-3:after {
-      //   @include particles(800);
-      //   height: 10px;
-      //   width: 10px;
-      //   border-radius: 50%;
-      // }
-
-      .particle-4 {
-        animation: animParticle $time-4 linear infinite;
-        @include particles(0);
-        height: 1px;
-        width: 1px;
-      }
-
-      .particle-4:after {
-        @include particles(0);
-        height: 1px;
-        width: 1px;
+      .animation-wrapper {
+        display: none;
+        visibility: hidden;
+        content-visibility: hidden;
       }
     }
   }

packages/fakeyou.com/src/data/animation.ts

@@ -1,8 +1,8 @@
 //Animation property variables
-export const distance = "30px";
+export const distance = "10px";
 export const delay = "100";
 export const delay2 = "200";
-export const duration = "400";
+export const duration = "300";
 
 //pricing page
 export const pricing1 = "0";
@@ -13,7 +13,7 @@ export const container = {
   visible: {
     opacity: 1,
     transition: {
-      staggerChildren: 0.06,
+      staggerChildren: 0.02,
     },
   },
   hidden: { opacity: 0 },
@@ -23,34 +23,34 @@ export const item = {
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.5, ease: [0.1, 0.8, 0.44, 1] },
+    transition: { duration: 0.1 },
   },
-  hidden: { opacity: 0, y: 50 },
+  hidden: { opacity: 0, y: 15 },
 };
 
 export const image = {
   visible: {
     opacity: 1,
     x: 0,
-    transition: { duration: 0.6, ease: [0.1, 0.8, 0.44, 1] },
+    transition: { duration: 0.1 },
   },
-  hidden: { opacity: 0, x: 100 },
+  hidden: { opacity: 0, x: 15 },
 };
 
 export const panel = {
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.75, ease: [0.1, 0.8, 0.44, 1] },
+    transition: { duration: 0.2 },
   },
-  hidden: { opacity: 0, y: 50 },
+  hidden: { opacity: 0, y: 15 },
 };
 
 export const sessionItem = {
   visible: {
     opacity: 1,
     x: 0,
-    transition: { duration: 0.75, ease: [0.1, 0.8, 0.44, 1] },
+    transition: { duration: 0.2 },
   },
-  hidden: { opacity: 0, x: 50 },
+  hidden: { opacity: 0, x: 15 },
 };

packages/fakeyou.com/src/scss/CSSParticles.scss

@@ -1,6 +1,6 @@
 /* Config */
 $color-bg: #000000;
-$color-particle: rgba(255, 255, 255, 0.12);
+$color-particle: rgba(255, 255, 255, 0.04);
 $spacing: 2560px;
 $time-1: 120s;
 $time-2: 240s;
@@ -53,26 +53,26 @@ $time-4: 420s;
 
 .particle-1 {
   animation: animParticle $time-1 linear infinite;
-  @include particles(500);
+  @include particles(400);
   height: 7px;
   width: 7px;
 }
 
 .particle-1:after {
-  @include particles(400);
+  @include particles(300);
   height: 8px;
   width: 8px;
 }
 
 .particle-2 {
   animation: animParticle $time-2 linear infinite;
-  @include particles(300);
+  @include particles(200);
   height: 5px;
   width: 5px;
 }
 
 .particle-2:after {
-  @include particles(500);
+  @include particles(400);
   height: 5px;
   width: 5px;
 }
@@ -99,12 +99,12 @@ $time-4: 420s;
 
 @keyframes animParticle {
   from {
-    // transform: translateY(0px);
-    transform: translateY($spacing * -1);
+    transform: translateY(0px);
+    // transform: translateY($spacing * -1);
   }
   to {
-    // transform: translateY($spacing * -1);
-    transform: translateY(0px);
+    transform: translateY($spacing * -1);
+    // transform: translateY(0px);
   }
 }
 

packages/fakeyou.com/src/v2/nav/TopNav.tsx

@@ -116,10 +116,10 @@ function TopNav(props: Props) {
       sessionItem.hidden.opacity = 1;
     } else {
       image.hidden.opacity = 0;
-      image.hidden.x = 100;
-      panel.hidden.y = 50;
-      item.hidden.y = 50;
-      sessionItem.hidden.x = 50;
+      image.hidden.x = 15;
+      panel.hidden.y = 15;
+      item.hidden.y = 15;
+      sessionItem.hidden.x = 15;
       panel.hidden.opacity = 0;
       item.hidden.opacity = 0;
       container.hidden.opacity = 0;

packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx

@@ -402,9 +402,9 @@ function TtsModelListPage(props: Props) {
           </div>
         </div>
 
-        <div className="pt-5">
+        {/* <div className="pt-5">
           <BackLink link="/" text="Back to main page" />
-        </div>
+        </div> */}
       </motion.div>
 
       <SessionTtsInferenceResultListFc