Lines in the first page

public/home/js/scroll.js

@@ -1,3 +1,19 @@
+// Generate vertical lines for .home__circles-lines
+if ($('.home__circles-lines').length > 0) {
+    const count = 82;
+    const fragment = document.createDocumentFragment();
+    const div = document.createElement('div');
+
+    for (let i = 0; i < count; i++) {
+        fragment.appendChild(div.cloneNode(true));
+    }
+
+    $('.home__circles-lines').append(fragment);
+    console.log('✅ 82 divs added to .home__circles-lines');
+} else {
+    console.warn('⚠️ .home__circles-lines not found in DOM');
+}
+
 /* 2.4 Home scroll animation */
 $(window).on('load',function (){
     $('#preloader').fadeOut(1500);
@@ -10,6 +26,21 @@ $(window).on('load',function (){
                 gsap.to('.main--home', {duration: 0.5,autoAlpha: 1},0);
             });
 
+            // Animación de líneas verticales
+            gsap.delayedCall(0.8, function () {
+                gsap.to(".home__circles-lines div", {
+                    height: '100%',
+                    opacity: 1,
+                    duration: 2,
+                    ease: "power2.out",
+                    stagger: {
+                        amount: 1,
+                        from: "center"
+                    }
+                });
+            });
+
+
 
             let titles = gsap.utils.toArray(".page-title li"),
                 sections = gsap.utils.toArray(".scrollable"),
@@ -191,18 +222,24 @@ console.log(
                 });
             });
             gsap.delayedCall(0.8, function () {
-                gsap.to(".home__circles-lines div", {height: '100%', duration: 2, opacity: 1});
+                const circlesLine = document.querySelector(".home__circles-lines div");
+                if (circlesLine) {
+                    gsap.to(circlesLine, {height: '100%', duration: 2, opacity: 1});
+                } else {
+                    console.warn("⚠️ Missing .home__circles-lines div — animation skipped.");
+                }
             });
+
             gsap.delayedCall(1, function () {
                 gsap.to(".home__circle--left", {left: '50%', duration: 2, opacity: 1});
                 gsap.to(".home__circle--right", {right: '50%', duration: 2, opacity: 1});
             });
-            tl1.to(".home__circle--left, .home__circle--rigth", {
+
+            tl1.to(".home__circle--left, .home__circle--right", {
                 x: 0,
                 ease: "none"
             }, 0);
 
-
             //projects
             let titlesProjects = gsap.utils.toArray(".projects .content__title > *");
             titlesProjects.forEach((title, index) => {
@@ -793,6 +830,8 @@ console.log(
                         gsap.set(titles, {y: "100%"});
                         gsap.set(titles[parseInt(link)], {y: "0"});
                         gsap.set(sections, {xPercent: -100 * parseInt(link), ease: "none"}, 0);
+                        ScrollTrigger.refresh();
+                        console.log('[✓] ScrollTrigger refreshed after menu click');
                         $('.header__menu li').removeClass('active');
                         $('.header__menu li').eq(parseInt(link)).addClass('active');