Jump to content


Infinite list with magnetic center

Recommended Posts

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">
                    <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" />
         <div class="menu__item"><h3><a class="menu__item-inner">Golden Freckles</a></h3></div>

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;

 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.

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.