Mantrone

Thanks @Rodrigo these are a great starting point. I will post the final result here as I complete it. Maybe it will help someone.

Hi everyone, I would like to create a gallery like this one, where the images are randomly positioned on a board larger than the viewport, and I can navigate them via mouse hover. I don't know if that's the right term...could I call it magnetic navigation? Here is the reference link: https://wearemotto.com/explore/ Could gsap help me in the realization? Do you know of any pen that reproduces this effect or almost? any kind of help would be appreciated.

function drag(e){ if (e.touches) e.clientX = e.touches[0].clientX; gsap.set('.link-case', {pointerEvents: 'none'}); gsap.to('.ring-cases', { rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ), // onUpdate:()=>{ gsap.set('.img', { backgroundPosition:(i)=>getBgPos(i) }) } }); xPos = Math.round(e.clientX); } function dragEnd(e){// eslint-disable-line window.removeEventListener('mousemove', drag); window.removeEventListener('touchmove', drag); gsap.set('.ring-cases', {cursor:'grab'}); gsap.set('.link-case', {pointerEvents: 'auto'}) } I don't know if it's the most elegant thing, but I did it by inserting in the drag function a tween of gsap to which I give pointerEvents: 'none' and to the dragEnd function pointerEvents: 'auto'. ty

Ok, somehow it's dynamic now. Now I've have another big problem: I changed the initial code a bit by inserting images as tags and no longer as background images. I insert also a link tag inside div .img that wrap img. This links inside every cards cause problems with drag. each time I drag to rotate the carousel from a link, it drags the link itself and not the carousel. Then either added the attribute to the link draggable = "false" and it works, but now if I drag the carousel from an image, when the mouse is released, it changes the page (if I release the mouse over the same image). this is a logical behavior as for javascript it's not only a drag, but a click on the element. do you have any other advice for me? I would very much appreciate any help. Ty

Hi @akapowl Thank you for your answer. This is a good starting point. I almost implement it in my project. The problem now is that's not dynamic: If I decrease or increase the number of .img, the carousel won't readjust based on number of images. Any ideas on how I could modify the code? Ty

Hi everyone. I need to make a carousel like this. Honestly, I don't even know what to look for. Any kind of help will be greatly appreciated. Ty

Hi, Thank you very much to everyone for your suggestions. I'd say Cassie's example is the closest. I will start develop from this. Ty

Hi everyone. There's a way to implement an animation that, at the start position is a centered linear text. On scroll the text morph in a circle. i thought the fairest way might be to use text / paths in svg, and then animate the shape of the path to the scroll. these attach are the two states of animation. First is text linear. do you think it's possible to do using gsap and its plugins? Ty