Mouse and object movement (touch)

[anastasiya97]

Hello. What I'm trying to do is this animation: https://yadi.sk/i/L8YWVTYsCSSpXQ

The meaning is this: a big slide takes up the whole width of the screen, and the names (first, second...) are smaller. And when you swipe a big slide is a long distance, and the names are a small distance, because they are closer to each other. I hope I've made myself clear ))). Well, anyway, I tried to put it on video.  

However, I can't bind the mouse movement and the animation itself. For some reason, the blocks move a long distance. At this point, I'm trying to animate large slides.

Can you tell me where I'm making a mistake?
I use libraries:
jquery+touchSwipe (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)

 

Here's CODEPEN: https://codepen.io/nastya97core/pen/vYOogya

Can you help me with the code, please? Point me in the right direction, please.

 

Translated with www.DeepL.com/Translator (free version)

See the Pen vYOogya by nastya97core (@nastya97core) on CodePen

[ZachSaucier]

Hello Anastasiya and welcome to the GreenSock forums! 

 

In English that sort of effect is called "parallax scrolling". It involves moving different elements at different speeds. You can create it using GSAP like this demo: 

See the Pen aXvOyx by JonQuayle (@JonQuayle) on CodePen

[anastasiya97]

I still couldn't figure out the "parallax."
I just have a different width for each menu item.

I took the slider script(https://flickity.metafizzy.co/), but I can't link the menu to the slider. The switch works, no problems, but drag and drop doesn't work. I know it's not really a gsap question, but still maybe somebody can help me?

 

I wanted to make the top menu that will move with the slider, but the width of the menu item is smaller (so conceived) than the slider itself, so it looks out of the block. Can you tell me how to make the menu work properly?

 

https://jsfiddle.net/gbjy3qhu/

 

[ZachSaucier]

You can modify these full page sliders that have draggable and click support: 

To get a parallax effect working with another element like the title, you could put code in the onDrag and onThrow callbacks.