typewriter

Thanks for the cleanup. And i have fixed the issue. It was due to the shadow that was applied on the :before.

I'm working on a grid animation using ScrollTrigger where the grid items separate as the user scrolls. I've successfully implemented this, but I wanted to add a pulse animation to the borders of the grid items. The problem is that when both animations run together, some of the borders don't disappear as expected. However, if I disable the grid scrolling animation, the pulse animation works perfectly. I've attached a screenshot and a video to illustrate the issue. Any help or advice on resolving this would be greatly appreciated! https://aegis-sepia.vercel.app/ -> hosted the app on vercel const gridAnimations = () => { // Pulse const scrollTriggerConfig = { trigger: '.fourth-container', start: 'top 100%', scrub: true, markers: true, }; const pulseTimeline = gsap.timeline({ repeat: -1, repeatDelay: 2, onComplete: () => ScrollTrigger.refresh(), }); pulseTimeline .from('.grid-item.active', { border: '1px solid transparent', }) .to('.grid-item.active', { border: '1px solid #16729b', repeat: 0, stagger: { amount: 2, grid: [itemsPerColumn, itemsPerRow], from: 1, }, }) .to('.grid-item.active', { border: '1px solid transparent', stagger: { amount: 1.5, grid: [itemsPerColumn, itemsPerRow], from: 1, }, }); // Scale and opacity animation for grid items gsap.fromTo( '.grid-item', { scale: 0.8, opacity: 1, }, { x: (i) => { var currentRow = Math.floor(i / itemsPerRow); var center = currentRow * itemsPerRow + Math.floor(itemsPerRow / 2); return i <= center ? '-100%' : '100%'; }, y: '100%', scale: 0, stagger: { grid: [itemsPerColumn, itemsPerRow], each: 0.1, from: 15, }, duration: 1, scrollTrigger: scrollTriggerConfig, } ); }; <div key={i} className="active grid-item relative border-[transparent] border before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0 before:shadow-[1px_10px_70px_black] bg-[var(--bg)] before:z-[1]"> <span></span> </div> SOLVED: It was the due to the shadow applied on the grid items :before Untitled video - Made with Clipchamp.mp4