Marquee Effect Cards

[Gvnn]

Hello, I am building a website with vue 3 and i want a section to have this marquee effect (products scrolls infinitely + responsive). But i am having trouble to build it. can you help me? Thank you so much!

vue verison 

See the Pen bGOENjy by berkegvn (@berkegvn) on CodePen

 

i want something like this one, stops when hover and drag to move both sides.

See the Pen ZEqdMmr by animaticss (@animaticss) on CodePen

 

HTML SCSS version

See the Pen MWZKYvY by berkegvn (@berkegvn) on CodePen

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you. 

 

You probably want to use our Seamlessly loop elements along the x-axis helper function, but if you're new to the tools I would advise first getting a bit more familiar with them. Check out the amazing starter guides below"

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

After you've tried somethings, post back here if you're stuck with the Javascript that is not working. 

[Gvnn]

Thanks for the reply!

I tried with Seamlessly loop as you said. It is kind of working but I couldn't figure out drag, it is little bit complicated and I cant make it work.

 

See the Pen dywGWxB?editors=0010 by berkegvn (@berkegvn) on CodePen

 

[Cassie]

Hey, you weren't including Draggable or InertiaPlugin and there were a few little errors in your code.

Here you go!

See the Pen VwqeXBa?editors=0011 by GreenSock (@GreenSock) on CodePen

[Gvnn]

Thank you so much, it works now!

 

I wonder with this helper function, is it possible to change animation direction with drag direction?

 

[alig01]

Hey,

 

I have adapted the codepen for your needs, the code for the drag direction change is from this thread answer, as I knew someone already asked the same question (the benefits for lurking around the forum).

 

Only thing left was the hovering logic.

See the Pen PoXNOEG?editors=0010 by alig01 (@alig01) on CodePen

 

 

Hope this helps and good luck with your project.

 

[Gvnn]

Thank you so much!