Replace Velocity.js with Animate.css (#41)

* Drop Velocity.js

* Update docs

.gitignore

@@ -12,4 +12,4 @@ source/lib/*
 # Track internal libraries & Ignore unused verdors files
 !source/lib/font-awesome/
 !source/lib/anime.min.js
-!source/lib/velocity/
+!source/lib/animate-css/

_config.yml

@@ -814,25 +814,19 @@ mermaid:
 # Animation Settings
 # ---------------------------------------------------------------
 
-# Use velocity to animate everything.
-# For more information: http://velocityjs.org
+# Use Animate.css to animate everything.
+# For more information: https://animate.style
 motion:
   enable: true
   async: false
   transition:
-    # Transition variants:
-    # fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
-    # swoopIn | whirlIn | shrinkIn | expandIn
-    # bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
-    # slideUpIn | slideDownIn | slideLeftIn | slideRightIn
-    # slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
-    # perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
+    # All available Transition variants: https://theme-next.js.org/animate/
     post_block: fadeIn
-    post_header: slideDownIn
-    post_body: slideDownIn
-    coll_header: slideLeftIn
+    post_header: fadeInDown
+    post_body: fadeInDown
+    coll_header: fadeInLeft
     # Only for Pisces | Gemini.
-    sidebar: slideUpIn
+    sidebar: fadeInUp
 
 # Progress bar in the top during page loading.
 # For more information: https://github.com/HubSpot/pace
@@ -876,11 +870,13 @@ vendors:
   internal: local
 
   # Internal version: 3.1.0
+  # anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
   # anime: //unpkg.com/animejs@3.1.0/lib/anime.min.js
   # anime: //cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js
   anime:
 
   # Internal version: 5.13.0
+  # fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css
   # fontawesome: //unpkg.com/@fortawesome/fontawesome-free@5/css/all.min.css
   # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
   fontawesome:
@@ -967,13 +963,11 @@ vendors:
   # mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.5.2/mermaid.min.js
   mermaid:
 
-  # Internal version: 1.2.1
-  # velocity: //unpkg.com/velocity-animate@1/velocity.min.js
-  # velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
-  # velocity_ui: //unpkg.com/velocity-animate@1/velocity.ui.min.js
-  # velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
-  velocity:
-  velocity_ui:
+  # Internal version: 3.1.1
+  # animate_css: //cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css
+  # animate_css: //unpkg.com/animate.css@3.1.1/animate.min.css
+  # animate_css: //cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css
+  animate_css:
 
   # Internal version: 1.0.2
   # pace: //unpkg.com/pace-js@1/pace.min.js

layout/_macro/sidebar.njk

@@ -25,7 +25,7 @@
       <!--noindex-->
       <section class="post-toc-wrap sidebar-panel">
         {%- if display_toc %}
-          <div class="post-toc motion-element">{{ toc }}</div>
+          <div class="post-toc animated">{{ toc }}</div>
         {%- endif %}
       </section>
       <!--/noindex-->
@@ -37,7 +37,7 @@
       </section>
 
       {%- if theme.back2top.enable and theme.back2top.sidebar %}
-        <div class="back-to-top motion-element">
+        <div class="back-to-top animated">
           <i class="fa fa-arrow-up"></i>
           <span>0%</span>
         </div>

layout/_partials/head/head.njk

@@ -46,6 +46,11 @@
 {%- set font_awesome_uri = theme.vendors.fontawesome or url_for('lib/font-awesome/css/all.min.css') %}
 <link rel="stylesheet" href="{{ font_awesome_uri }}">
 
+{%-if theme.motion.enable %}
+  {% set animate_css_uri = theme.vendors.animate_css or url_for('lib/animate-css/animate.min.css') %}
+  <link rel="stylesheet" href="{{ animate_css_uri }}">
+{%- endif %}
+
 {%- if theme.fancybox %}
   {%- set fancybox_css_uri = theme.vendors.fancybox_css or '//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css' %}
   <link rel="stylesheet" href="{{ fancybox_css_uri }}">

layout/_partials/sidebar/site-overview.njk

@@ -1,4 +1,4 @@
-<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
+<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
   {%- if theme.avatar.url %}
     <img class="site-author-image" itemprop="image" alt="{{ author }}"
       src="{{ url_for(theme.avatar.url) }}">
@@ -8,7 +8,7 @@
 </div>
 
 {%- if theme.site_state %}
-<div class="site-state-wrap motion-element">
+<div class="site-state-wrap animated">
   <nav class="site-state">
     {%- if config.archive_dir != '/' and site.posts.length > 0 %}
       <div class="site-state-item site-state-posts">
@@ -61,7 +61,7 @@
 {%- endif %}
 
 {%- if theme.chat.enable and theme.chat.service !== '' %}
-  <div class="sidebar-button motion-element">
+  <div class="sidebar-button animated">
   {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
     <a onclick="Chatra('openChat', true);">
   {%- endif %}
@@ -75,7 +75,7 @@
 {%- endif %}
 
 {%- if theme.social %}
-  <div class="links-of-author motion-element">
+  <div class="links-of-author animated">
     {%- for name, link in theme.social %}
       <span class="links-of-author-item">
       {%- set sidebarURL = link.split('||')[0] | trim %}
@@ -96,7 +96,7 @@
 {%- endif %}
 
 {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
-  <div class="cc-license motion-element" itemprop="license">
+  <div class="cc-license animated" itemprop="license">
   {%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %}
     {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
   </div>
@@ -104,7 +104,7 @@
 
 {# Blogroll #}
 {%- if theme.links %}
-  <div class="links-of-blogroll motion-element">
+  <div class="links-of-blogroll animated">
     <div class="links-of-blogroll-title">
       {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{%- endif %}
       {{ theme.links_settings.title }}

layout/_scripts/noscript.njk

@@ -2,8 +2,6 @@
   <style>
   body { margin-top: 2rem; }
 
-  .use-motion .header,
-  .use-motion .site-brand-container .toggle,
   .use-motion .menu-item,
   .use-motion .sidebar,
   .use-motion .post-block,
@@ -11,7 +9,12 @@
   .use-motion .comments,
   .use-motion .post-header,
   .use-motion .post-body,
-  .use-motion .collection-header,
+  .use-motion .collection-header {
+    visibility: visible;
+  }
+
+  .use-motion .header,
+  .use-motion .site-brand-container .toggle,
   .use-motion .footer { opacity: initial; }
 
   .use-motion .site-title,

scripts/filters/minify.js

@@ -7,7 +7,6 @@ hexo.extend.filter.register('after_generate', () => {
   if (!theme.minify) return;
 
   const lists = hexo.route.list();
-  const velocity = lists.filter(list => list.includes('lib/velocity'));
   const fontawesome = lists.filter(list => list.includes('lib/font-awesome'));
 
   if (!theme.bookmark.enable) {
@@ -16,15 +15,11 @@ hexo.extend.filter.register('after_generate', () => {
 
   if (!theme.motion.enable) {
     hexo.route.remove('js/motion.js');
-    velocity.forEach(path => {
-      hexo.route.remove(path);
-    });
+    hexo.route.remove('lib/animate-css/animate.min.css');
   }
 
-  if (theme.motion.enable && theme.vendors.velocity && theme.vendors.velocity_ui) {
-    velocity.forEach(path => {
-      hexo.route.remove(path);
-    });
+  if (theme.motion.enable && theme.vendors.animate_css) {
+    hexo.route.remove('lib/animate-css/animate.min.css');
   }
 
   if (theme.vendors.fontawesome) {

scripts/helpers/next-vendors.js

@@ -30,9 +30,5 @@ hexo.extend.helper.register('js_vendors', function() {
   if (theme.pangu) {
     vendors.pangu = '//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js';
   }
-  if (theme.motion.enable) {
-    vendors.velocity = 'lib/velocity/velocity.min.js';
-    vendors.velocity_ui = 'lib/velocity/velocity.ui.min.js';
-  }
   return vendors;
 });

source/css/_common/components/post/post.styl

@@ -34,25 +34,25 @@
 .use-motion {
   if (hexo-config('motion.transition.post_block')) {
     .post-block, .pagination, .comments {
-      opacity: 0;
+      visibility: hidden;
     }
   }
 
   if (hexo-config('motion.transition.post_header')) {
     .post-header {
-      opacity: 0;
+      visibility: hidden;
     }
   }
 
   if (hexo-config('motion.transition.post_body')) {
     .post-body {
-      opacity: 0;
+      visibility: hidden;
     }
   }
 
   if (hexo-config('motion.transition.coll_header')) {
     .collection-header {
-      opacity: 0;
+      visibility: hidden;
     }
   }
 }

source/css/_common/components/third-party/third-party.styl

@@ -5,3 +5,7 @@
 @import 'related-posts' if (hexo-config('related_posts.enable'));
 
 @import 'math' if (hexo-config('math.mathjax.enable'));
+
+.use-motion .animated {
+  visibility: visible;
+}

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

@@ -52,5 +52,5 @@
 }
 
 .use-motion .menu-item {
-  opacity: 0;
+  visibility: hidden;
 }

source/css/_schemes/Pisces/_sidebar.styl

@@ -13,7 +13,7 @@
   }
 
   if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
-    opacity: 0;
+    visibility: hidden;
   }
 }
 

source/js/motion.js

@@ -1,49 +1,54 @@
-/* global NexT, CONFIG, Velocity */
-
-if (window.$ && window.$.Velocity) window.Velocity = window.$.Velocity;
+/* global NexT, CONFIG */
 
 NexT.motion = {};
 
 NexT.motion.integrator = {
-  queue : [],
-  cursor: -1,
-  init  : function() {
+  queue: [],
+  init : function() {
     this.queue = [];
-    this.cursor = -1;
     return this;
   },
   add: function(fn) {
-    this.queue.push(fn);
+    const sequence = fn();
+    if (CONFIG.motion.async) this.queue.push(sequence);
+    else this.queue = this.queue.concat(sequence);
     return this;
   },
-  next: function() {
-    this.cursor++;
-    const fn = this.queue[this.cursor];
-    typeof fn === 'function' && fn(NexT.motion.integrator);
-  },
   bootstrap: function() {
-    this.next();
+    if (!CONFIG.motion.async) this.queue = [this.queue];
+    this.queue.forEach(sequence => {
+      const timeline = window.anime.timeline({
+        duration: 200,
+        easing  : 'linear'
+      });
+      sequence.forEach(item => {
+        if (item.deltaT) timeline.add(item, item.deltaT);
+        else timeline.add(item);
+      });
+    });
   }
 };
 
 NexT.motion.middleWares = {
-  logo: function(integrator) {
+  header: function() {
     const sequence = [];
 
     function getMistLineSettings(targets) {
-      sequence.push([{
+      sequence.push({
         targets,
         scaleX  : [0, 1],
-        duration: 500
-      }, '-=200']);
+        duration: 500,
+        deltaT  : '-=200'
+      });
     }
 
     function pushToSequence(targets, sequenceQueue = false) {
-      sequence.push([{
+      sequence.push({
         targets,
         opacity: 1,
-        top    : 0
-      }, sequenceQueue ? '-=200' : '-=0']);
+        top    : 0,
+        deltaT : sequenceQueue ? '-=200' : '-=0'
+      });
     }
 
     pushToSequence('.header');
@@ -54,101 +59,67 @@ NexT.motion.middleWares = {
     pushToSequence('.site-subtitle');
     (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
 
-    sequence[sequence.length - 1][0].complete = function() {
-      integrator.next();
-    };
-    const timeline = window.anime.timeline({
-      duration: 200,
-      easing  : 'linear'
-    });
-    sequence.forEach(item => timeline.add(...item));
-
-    if (CONFIG.motion.async) {
-      integrator.next();
-    }
-  },
-
-  menu: function(integrator) {
-    Velocity(document.querySelectorAll('.menu-item'), 'transition.slideDownIn', {
-      display : null,
-      duration: 200,
-      complete: function() {
-        integrator.next();
-      }
+    document.querySelectorAll('.menu-item').forEach(targets => {
+      sequence.push({
+        targets,
+        begin : () => targets.classList.add('animated', 'fadeInDown'),
+        deltaT: '-=200'
+      });
     });
 
-    if (CONFIG.motion.async || !document.querySelectorAll('.menu-item').length) {
-      integrator.next();
-    }
+    return sequence;
   },
 
-  subMenu: function(integrator) {
+  subMenu: function() {
     const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
     if (subMenuItem.length > 0) {
       subMenuItem.forEach(element => {
-        element.style.opacity = 1;
+        element.classList.add('animated');
       });
     }
-    integrator.next();
+    return [];
   },
 
-  postList: function(integrator) {
-    const postBlock = document.querySelectorAll('.post-block, .pagination, .comments');
-    const postBlockTransition = CONFIG.motion.transition.post_block;
-    const postHeader = document.querySelectorAll('.post-header');
-    const postHeaderTransition = CONFIG.motion.transition.post_header;
-    const postBody = document.querySelectorAll('.post-body');
-    const postBodyTransition = CONFIG.motion.transition.post_body;
-    const collHeader = document.querySelectorAll('.collection-header');
-    const collHeaderTransition = CONFIG.motion.transition.coll_header;
+  postList: function() {
+    const sequence = [];
+    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
 
-    if (postBlock.length > 0) {
-      const postMotionOptions = window.postMotionOptions || {
-        stagger : 100,
-        drag    : true,
-        complete: function() {
-          integrator.next();
-        }
-      };
+    function animate(animation, selector) {
+      if (!animation) return;
+      document.querySelectorAll(selector).forEach(targets => {
+        sequence.push({
+          targets,
+          begin : () => targets.classList.add('animated', animation),
+          deltaT: '-=100'
+        });
+      });
+    }
 
-      if (postBlockTransition) {
-        Velocity(postBlock, 'transition.' + postBlockTransition, postMotionOptions);
-      }
-      if (postHeaderTransition) {
-        Velocity(postHeader, 'transition.' + postHeaderTransition, postMotionOptions);
-      }
-      if (postBodyTransition) {
-        Velocity(postBody, 'transition.' + postBodyTransition, postMotionOptions);
-      }
-      if (collHeaderTransition) {
-        Velocity(collHeader, 'transition.' + collHeaderTransition, postMotionOptions);
-      }
-    }
-    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
-      integrator.next();
-    }
+    animate(post_block, '.post-block, .pagination, .comments');
+    animate(coll_header, '.collection-header');
+    animate(post_header, '.post-header');
+    animate(post_body, '.post-body');
+
+    return sequence;
   },
 
-  sidebar: function(integrator) {
+  sidebar: function() {
     const sidebar = document.querySelector('.sidebar');
     const sidebarTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
     if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
-      Velocity(sidebar, 'transition.' + sidebarTransition, {
-        display : null,
-        duration: 200
-      });
+      return [{
+        targets: sidebar,
+        begin  : () => sidebar.classList.add('animated', sidebarTransition)
+      }];
     }
-    integrator.next();
+    return [];
   },
 
-  footer: function(integrator) {
-    const footer = document.querySelector('.footer');
-    Velocity(footer, {
+  footer: function() {
+    return [{
+      targets: document.querySelector('.footer'),
       opacity: 1
-    }, {
-      duration: 200
-    });
-    integrator.next();
+    }];
   }
 };

source/js/next-boot.js

@@ -112,8 +112,7 @@ NexT.boot.motion = function() {
   // Define Motion Sequence & Bootstrap Motion.
   if (CONFIG.motion.enable) {
     NexT.motion.integrator
-      .add(NexT.motion.middleWares.logo)
-      .add(NexT.motion.middleWares.menu)
+      .add(NexT.motion.middleWares.header)
       .add(NexT.motion.middleWares.postList)
       .add(NexT.motion.middleWares.sidebar)
       .add(NexT.motion.middleWares.footer)

source/js/schemes/muse.js

@@ -1,4 +1,4 @@
-/* global CONFIG, Velocity */
+/* global CONFIG */
 
 document.addEventListener('DOMContentLoaded', () => {
 
@@ -33,12 +33,15 @@ document.addEventListener('DOMContentLoaded', () => {
     },
     showSidebar: function() {
       document.body.classList.add('sidebar-active');
-      if (typeof Velocity === 'function') {
-        Velocity(document.querySelectorAll('.sidebar .motion-element'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
-          stagger: 50,
-          drag   : true
-        });
-      }
+      const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
+      document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
+        element.style.animationDelay = (100 * index) + 'ms';
+        element.classList.remove(animateAction);
+        setTimeout(() => {
+          // Trigger a DOM reflow
+          element.classList.add(animateAction);
+        }, 0);
+      });
     },
     hideSidebar: function() {
       document.body.classList.remove('sidebar-active');