website/error404.js at master · ACHS-Robotics/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// credit goes to ZachSaucier on the GSAP forums and AnimatedCreativity on Codepen
var acAnimated = {Plugins: {}};
/* SplitText Plugin - Starts */
acAnimated.Plugins.SplitText = function(element, options) {
    if (!options.hasOwnProperty("words")) options.words = 1;
    if (!options.hasOwnProperty("chars")) options.chars = 1;
    if (!options.hasOwnProperty("spacing")) options.spacing = 5;
    this.searchTextNodes = function(element) {
        var foundTextNodes = [];
        if (element == null || element == undefined) return foundTextNodes;
        for (var i=0; i<=element.childNodes.length-1; i++) {
            var node = element.childNodes[i];
            if (node.nodeName == "#text") { //text found
                foundTextNodes.push(node);
            } else {
                var foundTextNodes = foundTextNodes.concat(this.searchTextNodes(node));
            }
        }
        return foundTextNodes;
    }
    this.createElement = function(text, relatedNode) {
        var node = document.createElement("div");
        var nodeText = document.createTextNode(text);
        node.nodeText = nodeText;
        node.appendChild(nodeText);
        node.style.display = "inline-block";
        node.style.position = "relative";
        if (text.trim() == "") node.style.width = String(options.spacing) + "px";
        relatedNode.parentNode.insertBefore(node, relatedNode);
        return node;
    }
    this.splitCharacters = function(textNode) {
        var characters = textNode.nodeValue.toString();
        var chars = [];
        if (characters.trim() != "") {
            for (var c=0; c<=characters.length-1; c++) {
                var character = characters.substr(c, 1)
                var char = this.createElement(character, textNode);
                if (character.trim() != "") chars.push(char);
            }
            textNode.parentNode.removeChild(textNode);
        }
        return chars;
    }
    this.splitWords = function(textNode) {
        var textWords = textNode.nodeValue.toString().split(" ");
        var words = [];
        for (var w=0; w<=textWords.length-1; w++) {
            var textWord = textWords[w];
            var word = this.createElement(textWord, textNode);
            if (textWord.trim() != "") words.push(word);
            if (w < textWords.length-1) this.createElement(" ", textNode); //spacing for word
        }
        textNode.parentNode.removeChild(textNode);
        return words;
    }
    this.splitTextNodes = function(textNodes) {
        var splitText = {words: [], chars: []};
        for (var i=0; i<=textNodes.length-1; i++) {
            var textNode = textNodes[i];
            if (options.words == 0) {
                splitText.chars = splitText.chars.concat(this.splitCharacters(textNode));
            } else {
                var words = this.splitWords(textNode);
                if (options.chars == 1) {
                    for (var w=0; w<=words.length-1; w++) {
                        word = words[w];
                        var chars = this.splitCharacters(word.nodeText);
                        splitText.chars = splitText.chars.concat(chars);
                        word.chars = chars;
                    }
                }
                splitText.words = splitText.words.concat(words);
            }
        }
        return splitText;
    }
    var textNodes = this.searchTextNodes(element);
    var splitText = this.splitTextNodes(textNodes);
    return splitText;
}
/*split ends here*/
acAnimated.randomNumber = function(min, max) {
    var num = min + Math.floor(Math.random() * (max - (min - 1)));
    return num;
}
acAnimated.randomDirection = function(number) {
    var direction = Math.floor(Math.random() * 2);
    if (direction == 0) number = 0 - number;
    return number;
}
acAnimated.animateChar = function(char) {
    var timeline = new TimelineMax({});
    timeline.from(char, acAnimated.randomNumber(3, 5) / 10, {
        top: acAnimated.randomDirection(acAnimated.randomNumber(10, 50)),
        rotationZ: acAnimated.randomDirection(acAnimated.randomNumber(90, 360)),
        rotationX: acAnimated.randomDirection(acAnimated.randomNumber(90, 360)),
        opacity: 0});
    return timeline;
}
acAnimated.animateChar1 = function(char) {
    var timeline = new TimelineMax({});
    timeline.from(char, acAnimated.randomNumber(3, 5) / 10, {
        opacity:0,
        duration:0.3,
        y:acAnimated.randomNumber(-80, 80)
    });
    return timeline;
}
var text = document.body.querySelector(".notfound-404 h2");
var splitText = acAnimated.Plugins.SplitText(text,{
    words: 1, chars: 1, spacing: 10
  });
  var timeline =new gsap.timeline();
  for (var i=0; i<=splitText.chars.length-1; i++) {
    var char = splitText.chars[i];
    timeline.add("animated_char_" + String(i), acAnimated.randomNumber(1, 20)/ 10);
    timeline.add(acAnimated.animateChar1(char), "animated_char_" + String(i));
}