caleb_case

Perfect. Would I use ScrollTrigger to tie the animation to scroll them I'm guessing?

Hello, I'm wanting to recreate this border animation where it draws in a thicker border to the lighter border on the footer of this site: https://ventriloc.ca/fr/ Would anyone be able to point me in the right direction in how I can achieve this affect or a similar affect? An idea I had was instead of keeping the thicker orange border small as you scroll down the page but having it expand to it's full parent container border instead of just going around. Any help/insight would be greatly appreciated. Thanks!

Okay I went ahead and forked the codepen and added the code. It looks to be running correctly how it should when testing it in the codepen. However, on the live site it's not performing this smoothly. https://codepen.io/caleb-case/full/poxgVvJ

I'm having issues with the vertical scroll loop I have built out where it glitches on repeat. Here's my code below, any help would be appreciated. And a live URL for where it currently lies: https://careers.primeinc.com ;(function(){ let chck_if_gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); if(window.gsap && window.ScrollTrigger && !eleBuilder){ gsap.registerPlugin(ScrollTrigger); animateImages(cols); clearInterval(chck_if_gsap_loaded); } }, 100); const cols = gsap.utils.toArray(".col"); function animateImages(cols) { let offset = 0; cols.forEach((col, i) => { const images = col.childNodes; // DUPLICATE IMAGES FOR LOOP images.forEach((image) => { var clone = image.cloneNode(true); col.appendChild(clone); }); // SET ANIMATION images.forEach((item) => { let columnHeight = item.parentElement.offsetHeight; let direction = i % 2 !== 0 ? "+=" : "-="; // Change direction for odd columns let yOffset = direction === "+=" ? -offset : offset; let tween = gsap.to(item, { y: direction + Number(columnHeight / 2), duration: 20, repeat: -1, ease: "none", onRepeat: () => { offset = 0; }, modifiers: { y: gsap.utils.unitize((y) => { y = (parseFloat(y) + yOffset) % (columnHeight * 0.5); return y; }) } }); document.querySelectorAll(".col").forEach((img) => { img.addEventListener("mouseover", () => { if (tween) tween.pause(); }); img.addEventListener("mouseout", () => { if (tween) tween.resume(); }); }); }); }); } })(); .main { padding: 0; max-height: 900px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: visible; } .gallery { z-index: 1; display: flex; flex-direction: row; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; } @media (max-width: 1366px) { .main { max-height: 800px; } } @media (max-width: 1024px) { .main { max-height: 400px; overflow: hidden; overflow-y: hidden; } } .col { display: flex; flex: 1; flex-direction: column; width: 100%; align-self: flex-start; justify-self: flex-start; } .col:nth-child(2) { align-self: flex-end; justify-self: flex-end; justify-content: flex-end; } .image { width: 100%; padding: 1rem; } .image:hover { z-index: 99999999999 !important; } .image iframe { transition: 0.3s ease-out; overflow: hidden; width: 100%; border-radius: 20px; box-shadow: rgba(0,0,0,.15) -3px 3px 20px; } .image img { transition: 0.3s ease-out; overflow: hidden; width: 100%; border-radius: 20px; box-shadow: rgba(0,0,0,.15) 3px 3px 20px; } <section class="main"> <div class="gallery"> <div class="col"> <div class="image"> <img src="https://images.pexels.com/photos/1086584/pexels-photo-1086584.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> <div class="image"> <img src="https://images.pexels.com/photos/1089194/pexels-photo-1089194.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> <div class="image"> <img src="https://images.pexels.com/photos/1601775/pexels-photo-1601775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> <div class="image"> <img src="https://images.pexels.com/photos/2902541/pexels-photo-2902541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> </div> <div class="col"> <div class="image"> <img src="https://images.pexels.com/photos/1086584/pexels-photo-1086584.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> <div class="image"> <img src="https://images.pexels.com/photos/1089194/pexels-photo-1089194.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> <div class="image"> <img src="https://images.pexels.com/photos/1601775/pexels-photo-1601775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /> </div> <div class="image"> <img src="https://images.pexels.com/photos/2902541/pexels-photo-2902541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"> </div> </div> </div> </section>