split?why

index.html

@@ -1638,18 +1638,17 @@ <h2 class="heading">
       <div class="footer-low-line"></div>
     </section>
     <script src="libs-js/gsap.min.js"></script>
-    <script type="module" src="js/works/index.js"></script>
     <script src="libs-js/split-text.js"></script>
-    <script type="module" src="js/index.js"></script>
+    <script src="libs-js/scrolltrigger.js"></script>
     <script type="module" src="js/preloader/index.js"></script>
 
     <link rel="stylesheet" type="text/css" href="libs-js/splitting-cells.css" />
     <link rel="stylesheet" type="text/css" href="libs-js/splitting.css" />
     <script src="libs-js/splitting.min.js"></script>
 
-    <script src="libs-js/scrolltrigger.js"></script>
-    <script type="module" src="js/distort/index.js"></script>
     <script type="module" src="js/works/index.js"></script>
+    <script type="module" src="js/menu.js"></script>
+    <script type="module" src="js/distort/index.js"></script>
 
     <script src="libs-js/lenis.js"></script>
 

js/distort/index.js

@@ -1,12 +1,9 @@
 import { Cursor } from "./cursor.js";
 import { MenuItem } from "./menuItem.js";
 
-// initialize Splitting
-const splitting = Splitting();
-
 gsap.registerPlugin(SplitText);
 document.addEventListener("DOMContentLoaded", () => {
-  const splitchars = document.querySelectorAll(".split-char-title");
+  const splitchars = document.querySelectorAll(".split-char");
 
   splitchars.forEach((splitchar) => {
     new SplitText(splitchar, {

js/main.js

@@ -16,21 +16,6 @@ if ("serviceWorker" in navigator) {
   });
 }
 
-// // Call the split text to transform the splittext gsap texts to spans of chars
-
-gsap.registerPlugin(SplitText);
-
-document.addEventListener("DOMContentLoaded", () => {
-  const splitchars = selectAll(".split-char");
-
-  splitchars.forEach((splitchar) => {
-    new SplitText(splitchar, {
-      type: "chars",
-      charsClass: "char",
-    });
-  });
-});
-
 //Group 1; code to update time
 document.addEventListener("DOMContentLoaded", function () {
   setTimeout(() => {

js/index.js → js/menu.js

@@ -1,7 +1,6 @@
 import { preloadImages } from "./utils.js";
-// preload images then remove loader (loading class)
-preloadImages(".tiles__line-img").then(() => document.body.classList.remove("loading"));
 
+preloadImages(".tiles__line-img").then(() => document.body.classList.remove("loading"));
 // frame element
 const frame = document.querySelector(".frame");
 

js/works/index.js

@@ -1,6 +1,17 @@
 import { preloadImages, abibae } from "./utils.js";
 import { Item } from "./item.js";
 
+document.addEventListener("DOMContentLoaded", () => {
+  const splitchars = document.querySelectorAll(".split-char-title");
+
+  splitchars.forEach((splitchar) => {
+    new SplitText(splitchar, {
+      type: "chars",
+      charsClass: "char",
+    });
+  });
+});
+
 // Preload images and fonts
 Promise.all([preloadImages(".item__img, .content__img")]).then(() => {
   abibae();

js/works/item.js

@@ -1,13 +1,5 @@
-// import { gsap } from './gsap.min.js';
 import { MagneticFx } from "./magneticFx.js";
 import { calcWinsize, wrapElements } from "./utils.js";
-// import { wrap } from 'gsap/gsap-core';
-
-// import "splitting/dist/splitting.css";
-// import "splitting/dist/splitting-cells.css";
-// import Splitting from "splitting";
-
-// initialize Splitting
 
 Splitting();
 
@@ -65,7 +57,9 @@ export class Item {
   }
   editHeadingLayout() {
     this.DOM.heading = this.DOM.el.querySelector(".heading--item");
+
     this.DOM.itemHeadingChars = [...this.DOM.heading.querySelectorAll(".char")];
+
     wrapElements(this.DOM.itemHeadingChars, "span", "char-wrap");
   }
   editContentLayout() {

public/index.html

@@ -14,4 +14,4 @@
                                                   C17.01,24.487,15.067,24.5,13.288,23.896z M8.12,13.122l-5.645-0.859c-0.741,2.666-0.666,5.514,0.225,8.143l5.491-1.375
                                                   C7.452,17.138,7.426,15.029,8.12,13.122z M28.763,11.333l-4.965,1.675c0.798,2.106,0.716,4.468-0.247,6.522l5.351,0.672
                                                       C29.827,17.319,29.78,14.193,28.763,11.333z M11.394,2.883l1.018,5.528c2.027-0.954,4.356-1.05,6.442-0.288l1.583-5.137
-                                                    C17.523,1.94,14.328,1.906,11.394,2.883z"></path><circle style="fill:#26c406" cx="15.979" cy="15.977" r="6.117"></circle></g></svg></div><div class="footer-low-line"></div></section><script src="libs-js/gsap.min.js"></script><script type="module" src="js/works/index.js"></script><script src="libs-js/split-text.js"></script><script type="module" src="js/index.js"></script><script type="module" src="js/preloader/index.js"></script><link rel="stylesheet" href="libs-js/splitting-cells.css"><link rel="stylesheet" href="libs-js/splitting.css"><script src="libs-js/splitting.min.js"></script><script src="libs-js/scrolltrigger.js"></script><script type="module" src="js/distort/index.js"></script><script type="module" src="js/works/index.js"></script><script src="libs-js/lenis.js"></script><link href="libs-js/mf.css" rel="stylesheet"><script src="libs-js/mf.js"></script><script src="js/jquery.min.js"></script><script src="js/magnetic.js"></script><script src="js/scrolltoplugin.js"></script><script defer="defer" src="bundle.js"></script></body></html>
+                                                    C17.523,1.94,14.328,1.906,11.394,2.883z"></path><circle style="fill:#26c406" cx="15.979" cy="15.977" r="6.117"></circle></g></svg></div><div class="footer-low-line"></div></section><script src="libs-js/gsap.min.js"></script><script src="libs-js/split-text.js"></script><script src="libs-js/scrolltrigger.js"></script><script type="module" src="js/preloader/index.js"></script><link rel="stylesheet" href="libs-js/splitting-cells.css"><link rel="stylesheet" href="libs-js/splitting.css"><script src="libs-js/splitting.min.js"></script><script type="module" src="js/works/index.js"></script><script type="module" src="js/menu.js"></script><script type="module" src="js/distort/index.js"></script><script src="libs-js/lenis.js"></script><link href="libs-js/mf.css" rel="stylesheet"><script src="libs-js/mf.js"></script><script src="js/jquery.min.js"></script><script src="js/magnetic.js"></script><script src="js/scrolltoplugin.js"></script><script defer="defer" src="bundle.js"></script></body></html>