0.2.03A1

.env

@@ -0,0 +1 @@
+UMI_UI=none umi dev

.gitignore

@@ -22,9 +22,3 @@ package-lock.json
 src/locales/_build
 src/locales/**/*.js
 recover/
-
-.env
-.env
-.env
-sockets/rs_develop
-src/Untitled-1.txt

comty_dev.service

@@ -0,0 +1,11 @@
+[Unit]
+Description=Comty_Development
+
+[Service]
+ExecStart=npm start
+Restart=always
+User=root
+WorkingDirectory=/ycore/development/comty-development
+
+[Install]
+WantedBy=multi-user.target

dev-server.sh

@@ -0,0 +1,53 @@
+#!/bin/sh
+
+pause(){
+  read -p "Press [Enter] key to continue..." fackEnterKey
+}
+
+start_cli_dev(){
+	sudo npm start
+}
+
+start_dev(){
+    systemctl start comty_dev
+    echo "Starting dev server..."
+}
+ 
+stop_dev(){
+	systemctl stop comty_dev
+    echo "Stoping dev server..."
+}
+
+
+show_menus() {
+	clear
+	echo "~~~~~~~~~~~~~~~~~~~~~"	
+	echo " Development Server  "
+	echo "~~~~~~~~~~~~~~~~~~~~~"
+	echo "1. Start CLI Server"
+	echo "2. Start Server"
+    echo "3. Stop Server"
+	echo "0. Exit"
+}
+
+read_options(){
+	local choice
+	read -p "Enter choice [ 1 - 3] " choice
+	case $choice in
+        0) exit 0;;
+		1) start_cli_dev ;;
+		2) start_dev ;;
+        3) stop_dev ;;
+		
+		*) echo -e "${RED}Error...${STD}" && sleep 2
+	esac
+}
+ 
+trap '' SIGINT SIGQUIT SIGTSTP
+ 
+while true
+do
+ 
+	show_menus
+	read_options
+done

package.json

@@ -2,7 +2,7 @@
   "name": "comty-development",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.2.02",
+  "version": "0.2.03",
   "description": "",
   "main": "index.js",
   "author": "RageStudio",

src/@ycore/libs/yulio_id/pre.js

@@ -138,7 +138,7 @@ export function GetAuth(EncUsername, EncPassword, callback) {
     };
     jquery.ajax(settings)
         .done(function (response) {
-            console.log(prefix, 'Server response... Dispathing data to login API...', response);
+            console.log(prefix, 'Server response... Dispathing data to login API...');
             try {
                 var identState = JSON.parse(response)['api_status'];
                 if (identState == 200) {

src/components/PageTransition/animations.js

@@ -0,0 +1,780 @@
+import { keyframes } from 'styled-components';
+
+export default {
+  moveToLeft: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateX(-100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromLeft: {
+    keyframes: keyframes`
+      from {  transform: translateX(-100%) };
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToRight: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateX(100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromRight: {
+    keyframes: keyframes`
+      from { transform: translateX(100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToTop: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateY(-100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromTop: {
+    keyframes: keyframes`
+      from { transform: translateY(-100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToBottom: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateY(100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromBottom: {
+    keyframes: keyframes`
+      from { transform: translateY(100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  fade: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToLeftFade: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateX(-100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromLeftFade: {
+    keyframes: keyframes`
+      from { opacity: 0.3;  transform: translateX(-100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToRightFade: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3;  transform: translateX(100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromRightFade: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateX(100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToTopFade: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateY(-100%); }
+    `,
+    duration: 600,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromTopFade: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(-100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveToBottomFade: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3;  transform: translateY(100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  moveFromBottomFade: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(100%); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleDown: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: scale(0.8); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleUp: {
+    keyframes: keyframes`
+	    from { opacity: 0;  transform: scale(0.8); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleUpDown: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: scale(1.2); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleDownUp: {
+    keyframes: keyframes`
+	    from { }
+	    to { opacity: 0; transform: scale(1.2); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleDownCenter: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: scale(0.7); }
+    `,
+    duration: 400,
+    timing: 'ease',
+    fill: 'both'
+  },
+  scaleUpCenter: {
+    keyframes: keyframes`
+      from { opacity: 0;  transform: scale(0.7); }
+    `,
+    duration: 400,
+    timing: 'ease',
+    fill: 'both'
+  },
+  rotateRightSideFirst: {
+    keyframes: keyframes`
+      0% { }
+      40% { transform: rotateY(15deg); opacity: 0.8; animation-timing-function: ease-out; }
+      100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+    `,
+    duration: 800,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateLeftSideFirst: {
+    keyframes: keyframes`
+      0% { }
+      40% { transform: rotateY(-15deg); opacity: 0.8; animation-timing-function: ease-out; }
+      100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+    `,
+    duration: 800,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateTopSideFirst: {
+    keyframes: keyframes`
+      0% { }
+      40% { transform: rotateX(15deg); opacity: 0.8; animation-timing-function: ease-out; }
+      100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+    `,
+    duration: 800,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateBottomSideFirst: {
+    keyframes: keyframes`
+      0% { }
+      40% { transform: rotateX(-15deg); opacity: 0.8; animation-timing-function: ease-out; }
+      100% {transform: scale(0.8) translateZ(-200px); opacity:0; }
+    `,
+    duration: 800,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  flipOutRight: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipInLeft: {
+    keyframes: keyframes`
+      from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-out',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipOutLeft: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipInRight: {
+    keyframes: keyframes`
+      from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-out',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipOutTop: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipInBottom: {
+    keyframes: keyframes`
+      from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-out',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipOutBottom: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  flipInTop: {
+    keyframes: keyframes`
+      from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+    `,
+    duration: 500,
+    timing: 'ease-out',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  rotateFall: {
+    keyframes: keyframes`
+      0% { transform: rotateZ(0deg); }
+      20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
+      40% { transform: rotateZ(17deg); }
+      60% { transform: rotateZ(16deg); }
+      100% { transform: translateY(100%) rotateZ(17deg); }
+    `,
+    duration: 1000,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 0%'
+  },
+  rotateOutNewspaper: {
+    keyframes: keyframes`
+      from { }
+      to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  rotateInNewspaper: {
+    keyframes: keyframes`
+      from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
+    `,
+    duration: 500,
+    timing: 'ease-out',
+    fill: 'both',
+    origin: '50% 50%'
+  },
+  rotatePushLeft: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: rotateY(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotatePushRight: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: rotateY(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotatePushTop: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: rotateX(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotatePushBottom: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: rotateX(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotatePullRight: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: rotateY(-90deg); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotatePullLeft: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: rotateY(90deg); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotatePullTop: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: rotateX(-90deg); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotatePullBottom: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: rotateX(90deg); }
+    `,
+    duration: 500,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateFoldRight: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: translateX(100%) rotateY(90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateFoldLeft: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateFoldTop: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateFoldBottom: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateUnfoldLeft: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateUnfoldRight: {
+    keyframes: keyframes`
+      from { opacity: 0;  transform: translateX(100%) rotateY(90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateUnfoldTop: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateUnfoldBottom: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
+    `,
+    duration: 700,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateRoomLeftOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateRoomLeftIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateRoomRightOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateRoomRightIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateRoomTopOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateRoomTopIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(100%) rotateX(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateRoomBottomOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateY(100%) rotateX(90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateRoomBottomIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateCubeLeftOut: {
+    keyframes: keyframes`
+      0% { }
+      50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+      100% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateCubeLeftIn: {
+    keyframes: keyframes`
+      0% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); }
+      50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateCubeRightOut: {
+    keyframes: keyframes`
+      0% { }
+      50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+      100% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateCubeRightIn: {
+    keyframes: keyframes`
+      0% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); }
+      50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateCubeTopOut: {
+    keyframes: keyframes`
+      0% {}
+      50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+      100% { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateCubeTopIn: {
+    keyframes: keyframes`
+      0% { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); }
+      50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateCubeBottomOut: {
+    keyframes: keyframes`
+      0% { }
+      50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+      100% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateCubeBottomIn: {
+    keyframes: keyframes`
+      0% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+      50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+    `,
+    duration: 600,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateCarouselLeftOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(-65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateCarouselLeftIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateCarouselRightOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '0% 50%'
+  },
+  rotateCarouselRightIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateX(-200%) scale(0.4) rotateY(-65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '100% 50%'
+  },
+  rotateCarouselTopOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateCarouselTopIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateCarouselBottomOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 0%'
+  },
+  rotateCarouselBottomIn: {
+    keyframes: keyframes`
+      from { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }
+    `,
+    duration: 800,
+    timing: 'ease',
+    fill: 'both',
+    origin: '50% 100%'
+  },
+  rotateSidesOut: {
+    keyframes: keyframes`
+      from { }
+      to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '-50% 50%'
+  },
+  rotateSidesIn: {
+    keyframes: keyframes`
+      from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
+    `,
+    duration: 500,
+    timing: 'ease-in',
+    fill: 'both',
+    origin: '150% 50%'
+  },
+  rotateSlideOut: {
+    keyframes: keyframes`
+      0% { }
+      25% { opacity: 0.5; transform: translateZ(-500px); }
+      75% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); }
+      100% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); }
+    `,
+    duration: 1000,
+    timing: 'ease',
+    fill: 'both'
+  },
+  rotateSlideIn: {
+    keyframes: keyframes`
+      0%, 25% { opacity: 0.5; transform: translateZ(-500px) translateX(200%); }
+      75% { opacity: 0.5; transform: translateZ(-500px); }
+      100% { opacity: 1; transform: translateZ(0) translateX(0); }
+    `,
+    duration: 1000,
+    timing: 'ease',
+    fill: 'both'
+  }
+};

src/components/PageTransition/index.js

@@ -0,0 +1,80 @@
+import React, { memo } from 'react';
+import { Transition, TransitionGroup } from 'react-transition-group';
+import animations from './animations';
+import presets from './presets';
+import * as Styles from './styles';
+
+function PageTransition({
+  children,
+  enterAnimation: enterAnimationOverride,
+  exitAnimation: exitAnimationOverride,
+  preset,
+  transitionKey,
+  ...rest
+}) {
+  const selectEnterAnimation = () => {
+    if (enterAnimationOverride) {
+      if (typeof enterAnimationOverride === 'string') {
+        return animations[enterAnimationOverride];
+      }
+      return {
+        ...animations[enterAnimationOverride.name],
+        delay: enterAnimationOverride.delay,
+        onTop: enterAnimationOverride.onTop
+      };
+    }
+    if (preset) {
+      return {
+        ...animations[presets[preset].enter.name],
+        delay: presets[preset].enter.delay,
+        onTop: presets[preset].enter.onTop
+      };
+    }
+    return 'rotateSlideIn';
+  };
+
+  const selectExitAnimation = () => {
+    if (exitAnimationOverride) {
+      if (typeof exitAnimationOverride === 'string') {
+        return animations[exitAnimationOverride];
+      }
+      return {
+        ...animations[exitAnimationOverride.name],
+        delay: exitAnimationOverride.delay,
+        onTop: exitAnimationOverride.onTop
+      };
+    }
+    if (preset) {
+      return {
+        ...animations[presets[preset].exit.name],
+        delay: presets[preset].exit.delay,
+        onTop: presets[preset].exit.onTop
+      };
+    }
+    return 'rotateSlideIn';
+  };
+
+  const enterAnimation = selectEnterAnimation();
+  const exitAnimation = selectExitAnimation();
+  const timeout = Math.max(enterAnimation.duration, exitAnimation.duration);
+
+  return (
+    <Styles.PageTransitionGroup {...rest}>
+      <TransitionGroup component={null}>
+        <Transition key={transitionKey} timeout={timeout}>
+          {state => (
+            <Styles.PageTransition
+              enterAnimation={enterAnimation}
+              exitAnimation={exitAnimation}
+              state={state}
+            >
+              {children}
+            </Styles.PageTransition>
+          )}
+        </Transition>
+      </TransitionGroup>
+    </Styles.PageTransitionGroup>
+  );
+}
+
+export default memo(PageTransition);

src/components/PageTransition/presets.js

@@ -0,0 +1,552 @@
+export default {
+    moveToLeftFromRight: {
+      exit: {
+        name: 'moveToLeft'
+      },
+      enter: {
+        name: 'moveFromRight'
+      }
+    },
+    moveToRightFromLeft: {
+      exit: {
+        name: 'moveToRight'
+      },
+      enter: {
+        name: 'moveFromLeft'
+      }
+    },
+    moveToTopFromBottom: {
+      exit: {
+        name: 'moveToTop'
+      },
+      enter: {
+        name: 'moveFromBottom'
+      }
+    },
+    moveToBottomFromTop: {
+      exit: {
+        name: 'moveToBottom'
+      },
+      enter: {
+        name: 'moveFromTop'
+      }
+    },
+    fadeFromRight: {
+      exit: {
+        name: 'fade'
+      },
+      enter: {
+        name: 'moveFromRight',
+        onTop: true
+      }
+    },
+    fadeFromLeft: {
+      exit: {
+        name: 'fade'
+      },
+      enter: {
+        name: 'moveFromLeft',
+        onTop: true
+      }
+    },
+    fadeFromBottom: {
+      exit: {
+        name: 'fade'
+      },
+      enter: {
+        name: 'moveFromBottom',
+        onTop: true
+      }
+    },
+    fadeFromTop: {
+      exit: {
+        name: 'fade'
+      },
+      enter: {
+        name: 'moveFromTop',
+        onTop: true
+      }
+    },
+    fadeLeftFadeRight: {
+      exit: {
+        name: 'moveToLeftFade'
+      },
+      enter: {
+        name: 'moveFromRightFade'
+      }
+    },
+    fadeRightFadeLeft: {
+      exit: {
+        name: 'moveToRightFade'
+      },
+      enter: {
+        name: 'moveFromLeftFade'
+      }
+    },
+    fadeTopFadeBottom: {
+      exit: {
+        name: 'moveToTopFade'
+      },
+      enter: {
+        name: 'moveFromBottomFade'
+      }
+    },
+    fadeBottomFadeTop: {
+      exit: {
+        name: 'moveToBottomFade'
+      },
+      enter: {
+        name: 'moveFromTopFade'
+      }
+    },
+    scaleDownFromRight: {
+      exit: {
+        name: 'scaleDown'
+      },
+      enter: {
+        name: 'moveFromRight',
+        onTop: true
+      }
+    },
+    scaleDownFromLeft: {
+      exit: {
+        name: 'scaleDown'
+      },
+      enter: {
+        name: 'moveFromLeft',
+        onTop: true
+      }
+    },
+    scaleDownFromBottom: {
+      exit: {
+        name: 'scaleDown'
+      },
+      enter: {
+        name: 'moveFromBottom',
+        onTop: true
+      }
+    },
+    scaleDownFromTop: {
+      exit: {
+        name: 'scaleDown'
+      },
+      enter: {
+        name: 'moveFromTop',
+        onTop: true
+      }
+    },
+    scaleDownScaleDown: {
+      exit: {
+        name: 'scaleDown'
+      },
+      enter: {
+        name: 'scaleUpDown',
+        delay: 300
+      }
+    },
+    scaleUpScaleUp: {
+      exit: {
+        name: 'scaleDownUp'
+      },
+      enter: {
+        name: 'scaleUp',
+        delay: 300
+      }
+    },
+    moveToLeftScaleUp: {
+      exit: {
+        name: 'moveToLeft',
+        onTop: true
+      },
+      enter: {
+        name: 'scaleUp'
+      }
+    },
+    moveToRightScaleUp: {
+      exit: {
+        name: 'moveToRight',
+        onTop: true
+      },
+      enter: {
+        name: 'scaleUp'
+      }
+    },
+    moveToTopScaleUp: {
+      exit: {
+        name: 'moveToTop',
+        onTop: true
+      },
+      enter: {
+        name: 'scaleUp'
+      }
+    },
+    moveToBottomScaleUp: {
+      exit: {
+        name: 'moveToBottom',
+        onTop: true
+      },
+      enter: {
+        name: 'scaleUp'
+      }
+    },
+    scaleDownScaleUp: {
+      exit: {
+        name: 'scaleDownCenter'
+      },
+      enter: {
+        name: 'scaleUpCenter',
+        delay: 400
+      }
+    },
+    glueLeftFromRight: {
+      exit: {
+        name: 'rotateRightSideFirst'
+      },
+      enter: {
+        name: 'moveFromRight',
+        delay: 200,
+        onTop: true
+      }
+    },
+    glueRightFromLeft: {
+      exit: {
+        name: 'rotateLeftSideFirst'
+      },
+      enter: {
+        name: 'moveFromLeft',
+        delay: 200,
+        onTop: true
+      }
+    },
+    glueBottomFromTop: {
+      exit: {
+        name: 'rotateTopSideFirst'
+      },
+      enter: {
+        name: 'moveFromTop',
+        delay: 200,
+        onTop: true
+      }
+    },
+    glueTopFromBottom: {
+      exit: {
+        name: 'rotateBottomSideFirst'
+      },
+      enter: {
+        name: 'moveFromBottom',
+        delay: 200,
+        onTop: true
+      }
+    },
+    flipRight: {
+      exit: {
+        name: 'flipOutRight'
+      },
+      enter: {
+        name: 'flipInLeft',
+        delay: 500
+      }
+    },
+    flipLeft: {
+      exit: {
+        name: 'flipOutLeft'
+      },
+      enter: {
+        name: 'flipInRight',
+        delay: 500
+      }
+    },
+    flipTop: {
+      exit: {
+        name: 'flipOutTop'
+      },
+      enter: {
+        name: 'flipInBottom',
+        delay: 500
+      }
+    },
+    flipBottom: {
+      exit: {
+        name: 'flipOutBottom'
+      },
+      enter: {
+        name: 'flipInTop',
+        delay: 500
+      }
+    },
+    fall: {
+      exit: {
+        name: 'rotateFall',
+        onTop: true
+      },
+      enter: {
+        name: 'scaleUp'
+      }
+    },
+    newspaper: {
+      exit: {
+        name: 'rotateOutNewspaper'
+      },
+      enter: {
+        name: 'rotateInNewspaper',
+        delay: 500
+      }
+    },
+    pushLeftFromRight: {
+      exit: {
+        name: 'rotatePushLeft'
+      },
+      enter: {
+        name: 'moveFromRight'
+      }
+    },
+    pushRightFromLeft: {
+      exit: {
+        name: 'rotatePushRight'
+      },
+      enter: {
+        name: 'moveFromLeft'
+      }
+    },
+    pushTopFromBottom: {
+      exit: {
+        name: 'rotatePushTop'
+      },
+      enter: {
+        name: 'moveFromBottom'
+      }
+    },
+    pushBottomFromTop: {
+      exit: {
+        name: 'rotatePushBottom'
+      },
+      enter: {
+        name: 'moveFromTop'
+      }
+    },
+    pushLeftPullRight: {
+      exit: {
+        name: 'rotatePushLeft'
+      },
+      enter: {
+        name: 'rotatePullRight',
+        delay: 180
+      }
+    },
+    pushRightPullLeft: {
+      exit: {
+        name: 'rotatePushRight'
+      },
+      enter: {
+        name: 'rotatePullLeft',
+        delay: 180
+      }
+    },
+    pushTopPullBottom: {
+      exit: {
+        name: 'rotatePushTop'
+      },
+      enter: {
+        name: 'rotatePullBottom',
+        delay: 180
+      }
+    },
+    pushBottomPullTop: {
+      exit: {
+        name: 'rotatePushBottom'
+      },
+      enter: {
+        name: 'rotatePullTop',
+        delay: 180
+      }
+    },
+    foldLeftFromRight: {
+      exit: {
+        name: 'rotateFoldLeft'
+      },
+      enter: {
+        name: 'moveFromRightFade'
+      }
+    },
+    foldRightFromLeft: {
+      exit: {
+        name: 'rotateFoldRight'
+      },
+      enter: {
+        name: 'moveFromLeftFade'
+      }
+    },
+    foldTopFromBottom: {
+      exit: {
+        name: 'rotateFoldTop'
+      },
+      enter: {
+        name: 'moveFromBottomFade'
+      }
+    },
+    foldBottomFromTop: {
+      exit: {
+        name: 'rotateFoldBottom'
+      },
+      enter: {
+        name: 'moveFromTopFade'
+      }
+    },
+    moveToRightUnfoldLeft: {
+      exit: {
+        name: 'moveToRightFade'
+      },
+      enter: {
+        name: 'rotateUnfoldLeft'
+      }
+    },
+    moveToLeftUnfoldRight: {
+      exit: {
+        name: 'moveToLeftFade'
+      },
+      enter: {
+        name: 'rotateUnfoldRight'
+      }
+    },
+    moveToBottomUnfoldTop: {
+      exit: {
+        name: 'moveToBottomFade'
+      },
+      enter: {
+        name: 'rotateUnfoldTop'
+      }
+    },
+    moveToTopUnfoldBottom: {
+      exit: {
+        name: 'moveToTopFade'
+      },
+      enter: {
+        name: 'rotateUnfoldBottom'
+      }
+    },
+    roomToLeft: {
+      exit: {
+        name: 'rotateRoomLeftOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateRoomLeftIn'
+      }
+    },
+    roomToRight: {
+      exit: {
+        name: 'rotateRoomRightOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateRoomRightIn'
+      }
+    },
+    roomToTop: {
+      exit: {
+        name: 'rotateRoomTopOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateRoomTopIn'
+      }
+    },
+    roomToBottom: {
+      exit: {
+        name: 'rotateRoomBottomOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateRoomBottomIn'
+      }
+    },
+    cubeToLeft: {
+      exit: {
+        name: 'rotateCubeLeftOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCubeLeftIn'
+      }
+    },
+    cubeToRight: {
+      exit: {
+        name: 'rotateCubeRightOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCubeRightIn'
+      }
+    },
+    cubeToTop: {
+      exit: {
+        name: 'rotateCubeTopOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCubeTopIn'
+      }
+    },
+    cubeToBottom: {
+      exit: {
+        name: 'rotateCubeBottomOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCubeBottomIn'
+      }
+    },
+    carouselToLeft: {
+      exit: {
+        name: 'rotateCarouselLeftOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCarouselLeftIn'
+      }
+    },
+    carouselToRight: {
+      exit: {
+        name: 'rotateCarouselRightOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCarouselRightIn'
+      }
+    },
+    carouselToTop: {
+      exit: {
+        name: 'rotateCarouselTopOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCarouselTopIn'
+      }
+    },
+    carouselToBottom: {
+      exit: {
+        name: 'rotateCarouselBottomOut',
+        onTop: true
+      },
+      enter: {
+        name: 'rotateCarouselBottomIn'
+      }
+    },
+    slides: {
+      exit: {
+        name: 'rotateSidesOut'
+      },
+      enter: {
+        name: 'rotateSidesIn',
+        delay: 200
+      }
+    },
+    slide: {
+      exit: {
+        name: 'rotateSlideOut'
+      },
+      enter: {
+        name: 'rotateSlideIn'
+      }
+    }
+  };

src/components/PageTransition/styles.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+
+const createAnimationStyles = ({
+  keyframes,
+  delay,
+  duration,
+  timing,
+  fill,
+  origin,
+  onTop
+}) => css`
+  animation-name: ${keyframes};
+  animation-delay: ${delay};
+  animation-duration: ${duration}ms;
+  animation-timing-function: ${timing};
+  animation-fill-mode: ${fill};
+  transform-origin: ${origin || '50% 50%'};
+  ${onTop &&
+    css`
+      z-index: 1;
+    `}
+`;
+
+const stateMap = {
+  entering: ({ enterAnimation }) => {
+    return css`
+      ${createAnimationStyles(enterAnimation)};
+    `;
+  },
+  exiting: ({ exitAnimation }) => {
+    return css`
+      ${createAnimationStyles(exitAnimation)};
+    `;
+  }
+};
+
+export const PageTransitionGroup = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  perspective: 1200px;
+`;
+
+export const PageTransition = styled.div`
+  backface-visibility: hidden;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform-style: preserve-3d;
+  transform: translate3d(0, 0, 0);
+  width: 100%;
+  ${({ state }) => stateMap[state]};
+`;

src/components/YulioID/index.js

@@ -92,7 +92,7 @@ class YulioID extends Component {
           visible={visible}
           className={styles.loginWrapper}
         >
-          <div className={styles.preheader}><h6><img src={"http://api.ragestudio.net/id.svg"} /> YulioID&trade;</h6>
+          <div className={styles.preheader}><h6><img src={"https://api.ragestudio.net/id.svg"} /> YulioID&trade;</h6>
           <h1>Login</h1></div>
           <main className={styles.mainlp}>
       

src/components/index.js

@@ -1,4 +1,5 @@
 import CustomIcons from './CustomIcons'
+import PageTransition from './PageTransition'
 import MainFeed from './MainFeed'
 import YulioID from './YulioID'
 import UserCard from './UserCard'
@@ -15,4 +16,4 @@ import CoreLoader from './CoreLoader'
 import MicroHeader from './MicroHeader'
 import HeaderSearch from './HeaderSearch'
 
-export { UserCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}
+export { PageTransition, UserCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}

src/layouts/PrimaryLayout.js

@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { connect } from 'dva'
-import { MyLayout, MicroHeader, HeaderSearch } from 'components'
+import { MyLayout, PageTransition, HeaderSearch } from 'components'
 import classnames from 'classnames'
 import * as ycore from 'ycore'
 import { Layout, Drawer, Result, Button, Checkbox } from 'antd'
@@ -13,7 +13,6 @@ import { config, pathMatchRegexp, langFromPath } from 'utils'
 import store from 'store';
 import Error from '../pages/404'
 import styles from './PrimaryLayout.less'
-import { PageTransition } from '@steveeeie/react-page-transition';
 
 const { Content } = Layout
 const { ChatSider, Sider, Control } = MyLayout
@@ -165,7 +164,7 @@ class PrimaryLayout extends PureComponent {
            <Sider {...SiderProps}/>
 
             <div id="primaryLayout" className={styles.leftContainer}>
-                <PageTransition preset="moveToLeftFromRight" transitionKey={location.pathname}>
+                <PageTransition preset="moveToLeftFromRight" id="scroller" transitionKey={location.pathname}>
                    
                     <Content {...ContainerProps} className={classnames(styles.content, {[styles.collapsed]: !collapsed} )}>
                         <HeaderSearch />

src/layouts/PrimaryLayout.less

@@ -108,9 +108,10 @@
   height: 100vh;
   bottom: 0;
  :global{
-  .iXUMqo{
-    overflow-y: scroll;
+  #scroller{
+    overflow-y: scroll !important;
   }
+  
  }
 }
 
@@ -129,7 +130,10 @@
     h1{
        color: @DarkMode-color_container;
     }
-    .iXUMqo{
+    #scroller{
+      overflow-y: hidden;
+    }
+    .gCVnuz{
        color: @DarkMode-color_container !important;
        overflow-y: hidden;
     }