Use anime.timeline

layout/_scripts/noscript.njk

@@ -2,16 +2,17 @@
   <style>
   body { margin-top: 2rem; }
 
-  .use-motion .header-inner,
+  .use-motion .header,
   .use-motion .site-brand-container .toggle,
   .use-motion .menu-item,
-  .sidebar-inner,
+  .use-motion .sidebar,
   .use-motion .post-block,
   .use-motion .pagination,
   .use-motion .comments,
   .use-motion .post-header,
   .use-motion .post-body,
-  .use-motion .collection-header { opacity: initial; }
+  .use-motion .collection-header,
+  .use-motion .footer { opacity: initial; }
 
   .use-motion .site-title,
   .use-motion .site-subtitle,

source/css/_common/outline/footer/footer.styl

@@ -19,6 +19,12 @@
   main-container();
 }
 
+.use-motion {
+  .footer {
+    opacity: 0;
+  }
+}
+
 @keyframes icon-animate {
   0%, 100% {
     transform: scale(1);

source/css/_common/outline/header/header.styl

@@ -24,7 +24,7 @@
 }
 
 .use-motion {
-  .header-inner, .site-brand-container .toggle {
+  .header, .site-brand-container .toggle {
     opacity: 0;
   }
 }

source/css/_schemes/Pisces/_sidebar.styl

@@ -11,6 +11,10 @@
   +tablet-mobile() {
     display: none;
   }
+
+  if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
+    opacity: 0;
+  }
 }
 
 .sidebar-toggle {
@@ -23,10 +27,6 @@
   box-shadow: $box-shadow;
   box-sizing: border-box;
   color: var(--text-color);
-
-  if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
-    opacity: 0;
-  }
 }
 
 .site-state-item a {

source/js/motion.js

@@ -29,56 +29,39 @@ NexT.motion.integrator = {
 NexT.motion.middleWares = {
   logo: function(integrator) {
     const sequence = [];
-    const header = document.querySelector('.header-inner');
-    const image = document.querySelector('.custom-logo-image');
-    const title = document.querySelector('.site-title');
-    const subtitle = document.querySelector('.site-subtitle');
-    const toggle = document.querySelectorAll('.site-brand-container .toggle');
-    const logoLine = document.querySelectorAll('.logo-line');
 
-    function getMistLineSettings(element) {
+    function getMistLineSettings(targets) {
-      Velocity.hook(element, 'scaleX', 0);
+      sequence.push([{
-      sequence.push({
+        targets,
-        e: element,
+        scaleX  : [0, 1],
-        p: {
+        duration: 500
-          scaleX: 1
+      }, '-=200']);
-        },
-        o: {
-          duration     : 500,
-          sequenceQueue: false
-        }
-      });
     }
 
-    function pushToSequence(element) {
+    function pushToSequence(targets, sequenceQueue = false) {
-      sequence.push({
+      sequence.push([{
-        e: element,
+        targets,
-        p: {
+        opacity: 1,
-          opacity: 1,
+        top    : 0
-          top    : 0
+      }, sequenceQueue ? '-=200' : '-=0']);
-        },
-        o: {
-          duration: 200
-        }
-      });
     }
 
-    header && pushToSequence(header);
+    pushToSequence('.header');
-    CONFIG.scheme === 'Mist' && logoLine.length && getMistLineSettings(logoLine);
+    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
-    CONFIG.scheme === 'Muse' && image && pushToSequence(image);
+    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
-    title && pushToSequence(title);
+    pushToSequence('.site-title');
-    subtitle && pushToSequence(subtitle);
+    pushToSequence('.site-brand-container .toggle', true);
-    toggle.length && pushToSequence(toggle);
+    pushToSequence('.site-subtitle');
-    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushToSequence(image);
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
 
-    if (sequence.length > 0) {
+    sequence[sequence.length - 1][0].complete = function() {
-      sequence[sequence.length - 1].o.complete = function() {
-        integrator.next();
-      };
-      Velocity.RunSequence(sequence);
-    } else {
       integrator.next();
-    }
+    };
+    const timeline = window.anime.timeline({
+      duration: 200,
+      easing  : 'linear'
+    });
+    sequence.forEach(item => timeline.add(...item));
 
     if (CONFIG.motion.async) {
       integrator.next();
@@ -128,16 +111,16 @@ NexT.motion.middleWares = {
         }
       };
 
-      if (CONFIG.motion.transition.post_block) {
+      if (postBlockTransition) {
         Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
       }
-      if (CONFIG.motion.transition.post_header) {
+      if (postHeaderTransition) {
         Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
       }
-      if (CONFIG.motion.transition.post_body) {
+      if (postBodyTransition) {
         Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
       }
-      if (CONFIG.motion.transition.coll_header) {
+      if (collHeaderTransition) {
         Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
       }
     }
@@ -147,15 +130,25 @@ NexT.motion.middleWares = {
   },
 
   sidebar: function(integrator) {
-    const sidebarAffix = document.querySelector('.sidebar-inner');
+    const sidebar = document.querySelector('.sidebar');
-    const sidebarAffixTransition = CONFIG.motion.transition.sidebar;
+    const sidebarTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
-    if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
-      Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
+      Velocity(sidebar, 'transition.' + sidebarTransition, {
         display : null,
         duration: 200
       });
     }
     integrator.next();
+  },
+
+  footer: function(integrator) {
+    const footer = document.querySelector('.footer');
+    Velocity(footer, {
+      opacity: 1
+    }, {
+      duration: 200
+    });
+    integrator.next();
   }
 };

source/js/next-boot.js

@@ -99,6 +99,7 @@ NexT.boot.motion = function() {
       .add(NexT.motion.middleWares.menu)
       .add(NexT.motion.middleWares.postList)
       .add(NexT.motion.middleWares.sidebar)
+      .add(NexT.motion.middleWares.footer)
       .bootstrap();
   }
   NexT.utils.updateSidebarPosition();