font flickering issue solve with animation

assets/sass/base/_animation.scss

@@ -1,5 +1,3 @@
-// -- Slide Animations -- //
-
 @include keyframes(slide-in-down) {
   0% {
     transform: translate(0,-12%);
@@ -12,7 +10,6 @@
   }
 }
 
-// Slide in Left to Center
 @include keyframes(slide-in-left) {
   0% {
     transform: translate(-12%,0);
@@ -24,3 +21,25 @@
     opacity: 1;
   }
 }
+
+@include keyframes(slide-in-down-little) {
+  0% {
+    transform: translate(0,-1%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+}
+
+@include keyframes(fade-in) {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

assets/sass/components/_bio.scss

@@ -3,7 +3,6 @@
   @include justify-content(center);
   @include align-items(flex-start);
   @include flex-direction(column);
-  @include animation('slide-in-down .4s .2s 1 ease both');
 
   width: 100%;
   font-family: $title-font;
@@ -13,6 +12,7 @@
     width: 100%;
     height: auto;
     @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
+    @include animation('slide-in-down .25s .6s 1 ease-in both');
 
     &-wrapper {
       width: 90%;

assets/sass/components/_summary.scss

@@ -1,7 +1,7 @@
 .summary-card {
   margin: 0 0.5rem;
   padding: 0 0.5rem;
-  @include animation('slide-in-down .2s .25s 1 ease-in both');
+  @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {
     a {
@@ -39,7 +39,7 @@
   &__image {
     width: 100%;
     height: 100%;
-    @include animation('slide-in-left .15s .6s 1 ease-in both');
+    @include animation('slide-in-left .2s .6s 1 ease-in both');
    
     &-wrapper {
       height: 100%;
@@ -81,7 +81,7 @@
 
 .summary-classic {
   padding: 0 1rem;
-  @include animation('slide-in-down .2s .25s 1 ease-in both');
+  @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {
     font-size: 24px;
@@ -129,7 +129,7 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
-    @include animation('slide-in-left .1s .6s 1 ease-in both');
+    @include animation('slide-in-left .2s .6s 1 ease-in both');
         
     &-wrapper {
       max-width: 130px;
@@ -165,7 +165,7 @@
 
 .summary-compact {
   padding: 0 1rem;
-  @include animation('slide-in-down .2s .25s 1 ease-in both');
+  @include animation('slide-in-down .2s .3s 1 ease-in both');
   
   &__flexbox {
     @include flexbox();

assets/sass/layout/_header.scss

@@ -14,6 +14,7 @@
   @include flexbox();
   @include justify-content(center);
   @include flex-direction(column);
+  @include animation('fade-in .15s .1s 1 ease-in both');
 
   &__title {
     line-height: 1.1;

assets/sass/pages/_single.scss

@@ -11,7 +11,7 @@
     line-height: 3rem;
     overflow-wrap: break-word;
 
-    @include animation('slide-in-down .2s .25s 1 ease-in both');
+    @include animation('slide-in-left .2s .15s 1 ease-in both');
     @include themify($themes) {
       color: themed("single-header-title-color");
     }
@@ -47,7 +47,7 @@
   }
 
   &__contents {
-    @include animation('slide-in-left .15s .6s 1 ease-in both');
+    @include animation('slide-in-down-little .3s .4s 1 ease-in both');
     &--gallery {
       overflow: hidden;
     }

layouts/gallery/single.html

@@ -9,7 +9,7 @@
 {{ $root := . }}
 {{ if in (lower .Params.Mode) "one" }}
 <main class="gallery main">
-  <div class="grid single__contents">
+  <div class="grid gallery__container">
     <div class="grid-sizer"></div>
     {{ if .File.Dir }}
       {{ $basename := (replace .File.Dir "\\" "/") }}
@@ -31,7 +31,7 @@
 {{ else }}
 
 <main class="gallery main">
-  <div class="grid single__contents">
+  <div class="grid gallery__container">
     <div class="grid-sizer"></div>
     {{ if .File.Dir }}
       {{ $basename := (replace .File.Dir "\\" "/") }}

layouts/partials/body/photoswipe.html

@@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   var modal = document.getElementById('modal');
-  var singleContentsElem = document.querySelector('.single__contents');
+  var galleryContainerElem = document.querySelector('.gallery__container');
   var swipeWrapElem = document.querySelector('.swipe-wrap');
   var mySwipeElem = document.getElementById('mySwipe');
   var arrowLeftElem = document.querySelector('.modal__arrow--left');
@@ -99,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function () {
   var captionElem = document.querySelector('.modal__caption');
   var pagingElem = document.querySelector('.modal__paging');
   var itemsElem = document.querySelector('.modal__items');
-  var imgTotalNum = singleContentsElem.querySelectorAll('img').length;
+  var imgTotalNum = null;
   var myFadeTimeout = null;
   var mySwipe = null;
   var keydownFunction = function (e) {
@@ -114,6 +114,13 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  if (galleryContainerElem) {
+    imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
+  } else {
+    galleryContainerElem = document.querySelector('.single__contents');
+    imgTotalNum = galleryContainerElem.querySelectorAll('img').length;
+  }
+
   MicroModal.init({
     onClose: () => {
       if (mySwipe) {
@@ -141,7 +148,7 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  singleContentsElem.querySelectorAll('img').forEach(function (elem, idx) {
+  galleryContainerElem.querySelectorAll('img').forEach(function (elem, idx) {
     elem.style.cursor = 'pointer';
 
     var clonedElem = elem.cloneNode(true);