Share Posted August 27 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 Link to comment Share on other sites More sharing options...
Share Posted August 27 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted August 28 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 Link to comment Share on other sites More sharing options...
Share Posted August 28 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted August 30 Thank you so much, it works now! I wonder with this helper function, is it possible to change animation direction with drag direction? Link to comment Share on other sites More sharing options...
Solution Solution Share Posted August 30 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted September 2 Thank you so much! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now