https://ciphersaw.me/js/motion.js

1/* global NexT, CONFIG */
2
3NexT.motion = {};
4
5NexT.motion.integrator = {
6  queue: [],
7  init : function() {
8    this.queue = [];
9    return this;
10  },
11  add: function(fn) {
12    const sequence = fn();
13    if (CONFIG.motion.async) this.queue.push(sequence);
14    else this.queue = this.queue.concat(sequence);
15    return this;
16  },
17  bootstrap: function() {
18    if (!CONFIG.motion.async) this.queue = [this.queue];
19    this.queue.forEach(sequence => {
20      const timeline = window.anime.timeline({
21        duration: 200,
22        easing  : 'linear'
23      });
24      sequence.forEach(item => {
25        if (item.deltaT) timeline.add(item, item.deltaT);
26        else timeline.add(item);
27      });
28    });
29  }
30};
31
32NexT.motion.middleWares = {
33  header: function() {
34    const sequence = [];
35
36    function getMistLineSettings(targets) {
37      sequence.push({
38        targets,
39        scaleX  : [0, 1],
40        duration: 500,
41        deltaT  : '-=200'
42      });
43    }
44
45    function pushToSequence(targets, sequenceQueue = false) {
46      sequence.push({
47        targets,
48        opacity: 1,
49        top    : 0,
50        deltaT : sequenceQueue ? '-=200' : '-=0'
51      });
52    }
53
54    pushToSequence('header.header');
55    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
56    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
57    pushToSequence('.site-title');
58    pushToSequence('.site-brand-container .toggle', true);
59    pushToSequence('.site-subtitle');
60    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
61
62    document.querySelectorAll('.menu-item').forEach(targets => {
63      sequence.push({
64        targets,
65        complete: () => targets.classList.add('animated', 'fadeInDown'),
66        deltaT  : '-=200'
67      });
68    });
69
70    return sequence;
71  },
72
73  subMenu: function() {
74    const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
75    if (subMenuItem.length > 0) {
76      subMenuItem.forEach(element => {
77        element.classList.add('animated');
78      });
79    }
80    return [];
81  },
82
83  postList: function() {
84    const sequence = [];
85    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
86
87    function animate(animation, selector) {
88      if (!animation) return;
89      document.querySelectorAll(selector).forEach(targets => {
90        sequence.push({
91          targets,
92          complete: () => targets.classList.add('animated', animation),
93          deltaT  : '-=100'
94        });
95      });
96    }
97
98    animate(post_block, '.post-block, .pagination, .comments');
99    animate(coll_header, '.collection-header');
100    animate(post_header, '.post-header');
101    animate(post_body, '.post-body');
102
103    return sequence;
104  },
105
106  sidebar: function() {
107    const sidebar = document.querySelector('.sidebar');
108    const sidebarTransition = CONFIG.motion.transition.sidebar;
109    // Only for Pisces | Gemini.
110    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
111      return [{
112        targets : sidebar,
113        complete: () => sidebar.classList.add('animated', sidebarTransition)
114      }];
115    }
116    return [];
117  },
118
119  footer: function() {
120    return [{
121      targets: document.querySelector('.footer'),
122      opacity: 1
123    }];
124  }
125};