https://meilbn.com/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('.column');
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    const menuItemTransition = CONFIG.motion.transition.menu_item;
63    if (menuItemTransition) {
64      document.querySelectorAll('.menu-item').forEach(targets => {
65        sequence.push({
66          targets,
67          complete: () => targets.classList.add('animated', menuItemTransition),
68          deltaT  : '-=200'
69        });
70      });
71    }
72
73    return sequence;
74  },
75
76  subMenu: function() {
77    const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
78    if (subMenuItem.length > 0) {
79      subMenuItem.forEach(element => {
80        element.classList.add('animated');
81      });
82    }
83    return [];
84  },
85
86  postList: function() {
87    const sequence = [];
88    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
89
90    function animate(animation, selector) {
91      if (!animation) return;
92      document.querySelectorAll(selector).forEach(targets => {
93        sequence.push({
94          targets,
95          complete: () => targets.classList.add('animated', animation),
96          deltaT  : '-=100'
97        });
98      });
99    }
100
101    animate(post_block, '.post-block, .pagination, .comments');
102    animate(coll_header, '.collection-header');
103    animate(post_header, '.post-header');
104    animate(post_body, '.post-body');
105
106    return sequence;
107  },
108
109  sidebar: function() {
110    const sequence = [];
111    const sidebar = document.querySelectorAll('.sidebar-inner');
112    const sidebarTransition = CONFIG.motion.transition.sidebar;
113    // Only for Pisces | Gemini.
114    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
115      sidebar.forEach(targets => {
116        sequence.push({
117          targets,
118          complete: () => targets.classList.add('animated', sidebarTransition),
119          deltaT  : '-=100'
120        });
121      });
122    }
123    return sequence;
124  },
125
126  footer: function() {
127    return [{
128      targets: document.querySelector('.footer'),
129      opacity: 1
130    }];
131  }
132};