Hey there Francesco! Wonderful work. I've already been able to use it in several projects.👏 Just wondering though if it would be possible for the stop on hover to be optional. The functionality is great for desktop, but on mobile it requires the user to tap off of the marquee area to resume the animation, which is not be a very intuitive experience. Another good option would be the ability of the user to swipe on mobile. It would be the perfect infinite marquee and would definitely stand out from the crowd of infinite marquees if these mobile enhancements could be possible. 😉 Again, many thanks for your amazing work!
Great tutorial Francesco! I have a few things to mention: - would be great to have an option to use multiple marquees on the same page - also it would be great to have an infinite loop option Your code doesn't work until I'll add all the options into the attributes. If something is an "option" I would think it should work without it.
Hey David, Thank you so much for your words and your precious suggestions! 😊 I've just updated both the cloneable and the library to account for default values for both the direction (horizontal) and the duration (120 s). That being said, as I mention in the video and as shown in the live link I provide, this component already gives the user the ability to add more than one marquee inside a single page and the loop is infinite by default.
Hey David, I just wanted to let you know that I have further improved marquee functionality, so getting the right configuration should be even easier now. 🙂
Thank you so much! I just have one question! Is there any way to reverse the marquee? Is it possible to go from left to right instead of right to left?
Hey! Thanks for the video. Was really helpful with my last project) What do you think about transition when user stops the animation? Any suggestions on how can I do it from my end? Thanks!
This is such a great presentation. Thank you! Subscribed ✍🏼 I wonder if it’s possible to adjust the motion to a stop motion, like a slider but with infinite loop, where the marquee will move once every 2 secs, where the next item replace the previous current item’s position, can we?
@@DaeronGraphics Awesome question, thank you so much for your suggestion! Just updated both the source code and the cloneable by adding two other values for the "fc-marquee-direction" attribute: "horizontal-reversed" and "vertical-reversed". Updates already available at webflow-friendly-components.webflow.io/infinite-marquee-with-stop-on-hover I'll probably even record a quick video update to notify everyone about this new feature. Thank you so much again! 😊
I noticed links in the code is there a chance of them going offline in the future and this feature being broken? want to implement it on a clients site but worry about the longevity..
Hey Eddi, thank you so much for your question! Those are just the links to the code I wrote to create the marquee functionality. Feel absolutely free to use it, it will just stay there forever, and never put offline. 🙂
I don't see the marquee working anymore on your site and I can't get it to work in my own webflow instance - is there a fix for this? Is anyone else having this issue?
Thank you for your comment! Are you still facing this issue? As shown in the tutorial and implemented in the cloneable project, the marquee works either with CMS items or with static images.
Thank you so much for your comment and for your question! 🙂 I haven't run a test to measure the impact on page load speed, but that should not be so high, because there's not too much code involved behind the scenes.
Thank you so much for your comment! Yup, unfortunately creating an effect like that would require custom code anyway, which is something that Webflow only allows if you have a paid plan.
Amazing Tutorial, supper easy to follow! However, I'm having an issue where the loop doesn't play continuously it jumps to the beginning halfway through. Any ideas to troubleshoot this? Thanks!
Hey Xela, Thank you so much for your kind words! ☺️ It's hard to say what's going wrong without taking a look at the project, but - based on my experience and the way I built the one in the cloneable - it could be that either the wrapper or the component inside your project has a width other than "Auto". Let me know if it works 🙂
Excellent! The tutorial is absolutely mind-blowing, and your teaching style is incredibly approachable and friendly ❤
Wow! Thank you so much for your kind words, Emran! 😊
This is a gem.
Worked like a charm, just the way I needed, thank you very much
I'm so happy to read that! Thank you so much! 😊
Grazie mille ,France
Grazie a te! 😊
Hey there Francesco! Wonderful work. I've already been able to use it in several projects.👏 Just wondering though if it would be possible for the stop on hover to be optional. The functionality is great for desktop, but on mobile it requires the user to tap off of the marquee area to resume the animation, which is not be a very intuitive experience. Another good option would be the ability of the user to swipe on mobile.
It would be the perfect infinite marquee and would definitely stand out from the crowd of infinite marquees if these mobile enhancements could be possible. 😉 Again, many thanks for your amazing work!
Here is how: Add this in the page , after the JS script link:
.component-classname:focus-within .wrapper-classname,
.component-classname:hover .wrapper-classname {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running
}
This was super helpful, thanks a lot
Great tutorial Francesco! I have a few things to mention:
- would be great to have an option to use multiple marquees on the same page
- also it would be great to have an infinite loop option
Your code doesn't work until I'll add all the options into the attributes. If something is an "option" I would think it should work without it.
Hey David,
Thank you so much for your words and your precious suggestions! 😊
I've just updated both the cloneable and the library to account for default values for both the direction (horizontal) and the duration (120 s).
That being said, as I mention in the video and as shown in the live link I provide, this component already gives the user the ability to add more than one marquee inside a single page and the loop is infinite by default.
Hey David,
I just wanted to let you know that I have further improved marquee functionality, so getting the right configuration should be even easier now. 🙂
@@francescocastronuovo Thanks for letting know, Francesco. I will check!
Thank you so much! I just have one question! Is there any way to reverse the marquee? Is it possible to go from left to right instead of right to left?
Thank you so muchhhh. this has helped me alotttt where do i buy yr webflow coursee!!
Cool and new!!:)
Thank you so much! 😊
its so good! thank you sirr
Thank you for your support! I'll try to make more videos like this 😊
Thanks for this great tutorial! how can I set the speed?
Hey @francescocastronuovo great work on the tutorial, and the solution is top-notch! I'm incorporated it into my project! Thanks!
Thank you!
Hey! Thanks for the video. Was really helpful with my last project)
What do you think about transition when user stops the animation? Any suggestions on how can I do it from my end?
Thanks!
This is such a great presentation. Thank you! Subscribed ✍🏼
I wonder if it’s possible to adjust the motion to a stop motion, like a slider but with infinite loop, where the marquee will move once every 2 secs, where the next item replace the previous current item’s position, can we?
Thank you so much for your words and your great suggestion! I will try to implement it as soon as possible! 😊
How about the option to turn it off for tablet and below?
Thanks Francesco!
Thank you for your support, Roberto! 😊
@@francescocastronuovo Is there a way to make the animation change direction?
@@DaeronGraphics Awesome question, thank you so much for your suggestion!
Just updated both the source code and the cloneable by adding two other values for the "fc-marquee-direction" attribute: "horizontal-reversed" and "vertical-reversed".
Updates already available at webflow-friendly-components.webflow.io/infinite-marquee-with-stop-on-hover
I'll probably even record a quick video update to notify everyone about this new feature.
Thank you so much again! 😊
@@francescocastronuovo You are the best brother, thanks! i will send you the website when i finish
@@francescocastronuovo One last thing i notice, when i use the script all the lotties i have in the website stop working ☹🥲
thx!
Thank you! 😊
I noticed links in the code is there a chance of them going offline in the future and this feature being broken? want to implement it on a clients site but worry about the longevity..
Hey Eddi, thank you so much for your question! Those are just the links to the code I wrote to create the marquee functionality. Feel absolutely free to use it, it will just stay there forever, and never put offline. 🙂
I don't see the marquee working anymore on your site and I can't get it to work in my own webflow instance - is there a fix for this? Is anyone else having this issue?
same here, I went to the page to see it before cloning and it isn't working
Does this only work CMS items because I can't make it work on my CSS grid of logo images? Any help would be appreciated!
Thank you for your comment!
Are you still facing this issue?
As shown in the tutorial and implemented in the cloneable project, the marquee works either with CMS items or with static images.
So how much will this impact page load speeds then? Nice tuut tho
Thank you so much for your comment and for your question! 🙂
I haven't run a test to measure the impact on page load speed, but that should not be so high, because there's not too much code involved behind the scenes.
so one cant use this on a free plan? sad.
Thank you so much for your comment!
Yup, unfortunately creating an effect like that would require custom code anyway, which is something that Webflow only allows if you have a paid plan.
Amazing Tutorial, supper easy to follow! However, I'm having an issue where the loop doesn't play continuously it jumps to the beginning halfway through. Any ideas to troubleshoot this? Thanks!
Hey Xela,
Thank you so much for your kind words! ☺️ It's hard to say what's going wrong without taking a look at the project, but - based on my experience and the way I built the one in the cloneable - it could be that either the wrapper or the component inside your project has a width other than "Auto". Let me know if it works 🙂