Infinite list with magnetic center

[lauren_d]

Hello and happy new year to all,

 

I'm trying to achieve the following effect: https://www.esperanto.design/ on the "all interviews" page, there is a list, I want to achieve the snap back into center when scrolling effect if possible with gsap.

When you stop scrolling the list, the nearest elem will snap back to the center.

 

For my project I have an infinite list wich clone my first elems and append them in the right place.

I determined the "vertical center" with document.elementFromPoint(100, winMidY) and It fives me the right element but I don't know what to do after..

Here's my project: https://nosaventures.netlify.app

Here is the html structure:

<nav class="menu" id="menu">
            <div class="scroll-arrow"></div>
            <div class="menu__item"><h2>&#127467</h2></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Fascination Street</a></h3></div>
            <div class="menu__item"><a class="menu__item-inner"><h3>The Last Dance</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Rebel Fantasies</a></h3></div>
            <div class="menu__item"><h2>&#127467</h2></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Love Letters to Cipher</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Henry and the Kids</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Downtown Blank</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Georgetown Blues</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">When Alice comes</a></h3></div>
            <div class="menu__item"><h2>&#127467</h2></div>
            <div class="menu__item"><h3><a class="menu__item-inner">A Rabbit's Dream</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Schizophrenia House</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Foundation Fabrics</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Whenever Whatever</a></h3></div>
            <div class="menu__item"><h3><a class="menu__item-inner">Feathers of Babel</a></h3></div>
            <div class="menu__item">
                <h2>
                    Irlande
                    <svg xmlns="http://www.w3.org/2000/svg" width="60" height="30">
                     <rect fill="#169b62" width="60" height="30" />
                     <rect fill="#fff" x="20" width="40" height="30" />
                     <rect fill="#ff883e" x="40" width="20" height="30" />
                 </svg>
             </h2>
         </div>
         <div class="menu__item"><h3><a class="menu__item-inner">Golden Freckles</a></h3></div>
     </nav>

And the js:

const menu = new InfiniteMenu(document.querySelector('nav.menu'));

let winMidY = innerHeight / 2;
let winMidX = innerWidth / 2;
const containerSelector = document.querySelector(".menu");
const lastCenteredElem = document.querySelector(".menu__item");
let speed = 0;

function updateCenterElem() {
	lastCenteredElem.style.pointerEvents = 'none';

  	let bcr = lastCenteredElem.getBoundingClientRect();
  	const targetElem = document.elementFromPoint(100, winMidY);

  	lastCenteredElem.style.pointerEvents = 'auto';
  	let midX = bcr.x + bcr.width / 2;
  	let midY = bcr.y + bcr.height / 2;
  
  	let x = winMidX - midX;
  	let y = winMidY - midY;
  	gsap.to(targetElem, {
		ease: "sine.inOut",
	    duration: 0.7,
	    y: midY
	});
  console.log("elem", targetElem);
}

window.addEventListener('wheel', (e)=>{
	speed += e.deltaY*0.0003;
	updateCenterElem();
})

 Obviously I don't have the effect wanted but I don't know what is missing. If someone could point me in the right direction, it would be great.

[ZachSaucier]

Hey lauren_d. For this (and most every scroll related effect) I recommend using ScrollTrigger. It has built in snapping that you can make use of. You can learn about it in the ScrollTrigger documentation. How about you read about it, give it a try, and if you run into issues that you can't figure out you create a minimal demo for us to look at?