Replace Velocity.js with Animate.css

.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,15 +96,15 @@
 {%- 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>
 {%- endif %}
 
 {# 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,16 +2,19 @@
   <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,
   .use-motion .pagination,
   .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;
   }
 }