I just updated the cloneable with fixes for published mobile sites: For images: set loading to eager and width to 100%. Minimize extra content within the content div. For text just minimize extra content in the content div. Thanks Jake for your comment.
@@samuel_powell in this case it means "100% of the parent element" or just makes the images fill available space depending on its sibling elements. in flexbox case.
Mine is a bunch of single words each in its own text block, works great on desktop. On mobile some of the words overlap. Not sure what you mean by "minimize extra content" in the content div.
If you want two marquees on the same page scrolling in opposite directions, give the marquee content in the second marquee another combo class of "reverse" and add this to the embed: .reverse { animation-direction: reverse; }
I think you might be my absolute favorite Webflow creator. You deserve FAR MORE credit and subs. Thank you for always putting time and care into your tutorials. This one helped out immensely!!!
@@webbae Absolutely! Anything I can do to help boost your visibility. I also watched your tutorial about connecting forms to third party applications like ConvertKit months ago and it was by FAR the most comprehensive and easiest to follow. Thank you for all of your hard work!
Thank you so much for taking the time to not just show the code but create a blog write up explaining your technique. I just could not wrap my mind around the concept until I found your video lol thank you!
I'm not sure why, but every single infinite marquee that I've ever built does the "snapping" thing randomly. You can observe this by pausing it and letting it sit for a bit. It will randomly jump and is kind of awkward.
You saved me, thanks man. I'm currently doing a pro-bono project with other passionated guys in Italy. We are trying to make a change in the system of education (even small). I needed so bad this tutorial. You may have indirectly contributed to a great cause ❤
Absolutely amazing tutorial. I managed to translate this into my Shopify page as our company is changing the theme and could follow is flawlessly. Thank you for your contribution!
Hello, thank you for this video. There is one problem I am having where the marquee flickers when transitioning on Firefox and Safari but works fine on Chrome. Do you know what could be causing this and how I can fix it?
not sure but it does sound like a calculation error or issue with your gap. A common mistake is also not eagerly loading images. Feel free to drop in discord and post a link to your project.
Thank you for your great tutorial. If I want to add the marquee behind the text, should I put its position as "fixed" or "absolute" with a z-index: -1 ?
Hi, any idea why at the end of the second marquee-content the animation "jumps" to the start position? It's not a smooth loop. Both marquee contents are the same. Thanks for the help!
it could be a number of things... timing, widths of inner elements, some CSS properties... the comments have a lot of troubleshooting that might help. otherwise feel free to post in Discord and I can try to help you out.
For some reason, the first 5 or 6 logos in my marquee don't smoothly come into view from off screen, where you can see the whole logo move into view. Instead they sort of blink in. Any ideas what's going on? Thanks
Thank you for the video. I have a question. Everything works great on desktop and even the mobile preview in web flow but whenever I publish it, all of my logos seem to be extremely far apart only in Mobile. I did your solution but they just seem to be so far apart from each other. Any idea why? I tried to join the discord but the link is invalid
@@webbae thanks! also this is the most perfect way of creating a marquee that i have come across yet! so simple, so seamless, no weird restarts, no gaps.. just stunning!
you might not have enough images in the content div to "squish" then together and enforce the 1 rem gap. Or you might have your base font size different. Hope that makes sense
I’m so glad it could help! In my latest live stream I used splide With the auto scroll extension to build a similar component, you might be interested in checking that out too
there are a lot of helpful tips in the comments. It may have to do with widths of items (check inspector). If that's troublesome - try my splide auto scroll cloneable: webflow.grsm.io/cloneable-is-bae?sub1=splide-template-with-autoscroll
Yes, but how do you get it to tilt like in the thumbnail? My guess is that you will need to be able to extend the edges past the VW and then add your rotation.
This is great, only thing is I get a gap between marquee content blocks, and second one just appears in the middle. Discord invite expired, any other way I get some help? Thanks! 🙏
Hey bro, whenever I swap my logos for the ones I want to use, the marque starts skipping, leaving a big gap then skips to the beginning again! Any ideas?
Check the comments for some ideas. Setting width to 100% and loading to eager helps. You might also need to play with the number of logos in your content div.
Reminiscent of childhood snow days, watching the schools scroll by on the bottom of the news channel indicating if they were still open. Needed them to scroll at faster rate!!
Happy New Year and thank you for sharing. The marquee is working perfectly in Safari and Chrome. I noticed a strange loop issue using Firefox, though. Simply add 8 images with 650x500px dimension to the marquee-content. The marquee flickers and the loop interrupts on Firefox. Adding 6 images instead shows smooth marquee. It could be related to max dimension? I have set loading to eager, width to 100% and also added -webkit-transform: translateZ(0) to no avail. Is it Firefox bug?
Very nice! I like this setup for a basic marquee, but if you want mouse interrupts where you can pause it when mouse enters and scroll with trackpad, I need a more advanced solution.
GSAP will have you covered for that - I have a video in that too :). This one could do the hover effect with an extra line of css I think someone already asked about that in the comments.
Thanks for the awesome vid man! Everything works except on my puplished mobile site, logos are randomly disappearing at times. Not sure if you have any advice or have seen this before? Cheers
Was able to fix the issues - make sure any images that will be off screen have loading set to "eager." I also set width to 100%. For text, I added a class of "hide" to the second text elements inside the content divs. It seems to perform best on mobile when you don't add more to the content div than what should render on screen. Preview link with fixes to follow once you guys confirm the fixes work for you.
Check out this cloneable by Khrystyna Liubynska which uses absolute divs with linear gradients. You might also be able to use CSS :before and/or :after pseudo elements to do it. webflow.grsm.io/cloneable-is-bae?sub1=logo-marquee-dual
hi there - super cool tutorial, thank you! Is there any way to solve issues when marquee is position absolute? As soon as I put the marquee div block as absolute it doesn't work as intended. I tried putting it in the wrapper that would be absolute so the marquee is static, but it also causes issues. I'm trying to use a marquee as a part of the design on the website in a specific place (rather then going across the whole page).
Major difference is CSS vs. JS. CSS I like because it's a simple copy/paste job and run in Webflow designer. JS I like because I feel like I have more control - I had one subscriber modify it so it scroll top to bottom instead. There's a lot of content on the web saying CSS animation outperform JS but the true answer is "it depends" I believe. In general I find myself reaching for Javascript when doing animations these days but that's probably just because I use it for so many other things too. CSS is capable of some really amazing stuff.
Hey Keegan, this is easily one of the simplest marquee! BTW, would love to know how to stop the scrolling animation on hover interactions, say helping the user to read and/or click link in the text content. Thanks!!
Apologies late to the party here! Thanks for this great marquee! Is it possible on mobile to make it animate slightly faster? Let me explain I've I've got 5 logos scrolling and 5 other in reverse and its set to '20s' and it works perfectly on desktop and tablet at that speed but on mobile portrait and landscape it slows to a snail's pace? :( Is it something I'm doing?
you could use a CSS media query to accomplish that... something like: /* Media query for mobile */ @media (max-width: 600px) { .scroll { animation-duration: 30s; /* Adjust the speed for mobile */ } }
@@webbae Thanks for this! Although i may be design savvy unfortunately I'm not coding savvy :)...but i'm learning! But now you've explained...it makes perfect sense! Like i say coding is not my expertise...so am i right in thinking if i place the media query like this?... @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } } .scroll { animation: scroll 30s linear infinite; } .reverse { animation-direction: reverse; } * Media query for mobile */ @media (max-width: 600px) { .scroll { animation-duration: 30s; /* Adjust the speed for mobile */ } }
Sure thing - essentially I would just map each collection item to "marque-image" and then the collection list would map to the "marque-content" div. Hope that helps!
Sometimes it needs a refresh or click of the preview button to "reset" but should still work on the published site. Swing by the Discord if you still need help: discord.gg/eun35XFA
Hey Joe - lots of info in the comments about little fixes you can try depending on what may be causing the skips. Feel free to hop in Discord and share a link too.
Hey Sam there are a number of ideas to explore in the comments for fixes across various browsers. Hard to troubleshoot without a minimum example of the problem you are facing though!
Hi Web Bae, amazing tutorial thank you very muhc for your content. How can i rotate the marquees without having them cutted? Thanks again keep up with your good work.
Hey Pedro - a few steps: 1. Extend the width to something like 110%. 2. Translate X left -5% (or whatever half of width%-100) is. 3. Rotate! 4. Set parent wrapper… probably the section… to overflow hidden to prevent horizontal scroll issues. Good question maybe I’ll make a quick video in that.
@@webbae already tried something like that but it still cuts on the left and adds horizontal scroll even if the marquee is set to overflow hidden. And if i make the section overflow hidden the marquee does something weird that gains some kind of padding that follow the height of the section. Maybe im doing something wrong. Thanks for the quick answer
thank you for your answer, i really appriciate it. It would be awesome if you explained what to do, because i have 2 different marquees on my home page now. I followed every step, only I did it with text, so I have 1 container and 2 containers and in each one 8 words.
did you read through the comments and the description block? There are sometime where you may need to make adjustments to getting it to work. My inclination is that the text may be too long or something and sometimes safari doesn't like that. Hard to say without being able to inspect though.
I tried making this with a collection list, there's a little work around that needs to be added. This example doesn't take into account the extra div (collection list wrapper), so it needs to be deleted on load (this doesn't affect the CMS items). Here's the script I added to handle this (it may need to be adapted to your build): $(document).ready(function() { $('.marquee-content').each(function() { const marqueeContent = $(this); const marqueeWrapper = marqueeContent.parent('.marquee-wrapper'); // move marqueeContent out of the wrapper marqueeWrapper.before(marqueeContent); // Delete marqueeWrapper marqueeWrapper.remove(); }); });
I just updated the cloneable with fixes for published mobile sites: For images: set loading to eager and width to 100%. Minimize extra content within the content div. For text just minimize extra content in the content div. Thanks Jake for your comment.
Does setting image width to 100% not fill the entire screen though?
@@samuel_powell in this case it means "100% of the parent element" or just makes the images fill available space depending on its sibling elements. in flexbox case.
Mine is a bunch of single words each in its own text block, works great on desktop. On mobile some of the words overlap. Not sure what you mean by "minimize extra content" in the content div.
If you want two marquees on the same page scrolling in opposite directions, give the marquee content in the second marquee another combo class of "reverse" and add this to the embed:
.reverse {
animation-direction: reverse;
}
💯 thanks Eric!
doesn't work
Thank you so much! Works perfectly!
I came back to this video hoping to find exactly this thank you so much
I think you might be my absolute favorite Webflow creator. You deserve FAR MORE credit and subs. Thank you for always putting time and care into your tutorials. This one helped out immensely!!!
Wow, thank you! Can I use this as an official testimonial???
@@webbae Absolutely! Anything I can do to help boost your visibility. I also watched your tutorial about connecting forms to third party applications like ConvertKit months ago and it was by FAR the most comprehensive and easiest to follow. Thank you for all of your hard work!
Bro, you've saved me on three projects with this marquee. Thank you, man.
Hey Joe - that’s awesome! Glad it helped.
You're right, I can't find a better infinite marquee. This code + the version you posted with the pause on hover is god-tier. Thank you!
Glad you like it!
Easy to follow. Works like a charm. This is my kind of tutorial!
Thank you so much for taking the time to not just show the code but create a blog write up explaining your technique. I just could not wrap my mind around the concept until I found your video lol thank you!
Just watched this and got a little nostalgic about the old Webflow UI. 😂
Hahah 🥲
I'm not sure why, but every single infinite marquee that I've ever built does the "snapping" thing randomly. You can observe this by pausing it and letting it sit for a bit. It will randomly jump and is kind of awkward.
You saved me, thanks man. I'm currently doing a pro-bono project with other passionated guys in Italy. We are trying to make a change in the system of education (even small). I needed so bad this tutorial. You may have indirectly contributed to a great cause ❤
Glad I could help and good luck!
How we are able to see the horizontal scrolling content in the editor on 3:01? Is that a webflow short key?
You can control that with the overflow property on the element with the marquee class.
@@webbae Thanks, I'll try it next time. Amazing channel and info btw, greetings from Eastern Europe!
Absolutely amazing tutorial. I managed to translate this into my Shopify page as our company is changing the theme and could follow is flawlessly. Thank you for your contribution!
Glad it helped - And cool to see it being used ALL OVER! The power of HTML + CSS :)
could you guide me with the path on where i should add this. is it edit code > sections > new section?
Hello, thank you for this video. There is one problem I am having where the marquee flickers when transitioning on Firefox and Safari but works fine on Chrome. Do you know what could be causing this and how I can fix it?
not sure but it does sound like a calculation error or issue with your gap. A common mistake is also not eagerly loading images. Feel free to drop in discord and post a link to your project.
same here
You simply cannot find a better one. Awesome.
Thank you 🙏
Thank you for your great tutorial. If I want to add the marquee behind the text, should I put its position as "fixed" or "absolute" with a z-index: -1 ?
Yup that could work.
How do you remove the gap between the marquee content blocks?
adjust the flex gap in designer and in the custom css.
Not many words needed. Just dope! Thank you.
Best Marquee tutorial! Easy to follow and to the point. Thanks Web Bae
Thanks Dmoco!
@@webbae Have you got any tutorials for horizontal splide drag but nested in the cart 😜 I was looking in the bae webflow resources
Hi, any idea why at the end of the second marquee-content the animation "jumps" to the start position? It's not a smooth loop. Both marquee contents are the same. Thanks for the help!
it could be a number of things... timing, widths of inner elements, some CSS properties...
the comments have a lot of troubleshooting that might help.
otherwise feel free to post in Discord and I can try to help you out.
That's the actual marquee that worked for me ! Thanks!
For some reason, the first 5 or 6 logos in my marquee don't smoothly come into view from off screen, where you can see the whole logo move into view. Instead they sort of blink in. Any ideas what's going on? Thanks
Check comments on setting loading to eager for your images.
Thank you for the video. I have a question. Everything works great on desktop and even the mobile preview in web flow but whenever I publish it, all of my logos seem to be extremely far apart only in Mobile. I did your solution but they just seem to be so far apart from each other. Any idea why? I tried to join the discord but the link is invalid
here's a link that will work for 7 days: discord.gg/mzTCSehv would love to check out your build.
what is the CSS for change the direction?. left, right, up, down.
this is automatically move from right to left... i want also up and down and right also.
Try reverse for right to left. For top to bottom you’ll need to modify the x value in the Keyframes to y. I’ll bet chatGPT could nail it!
why i cant use this in another page in the same project, i had problems with this :(
It should work across different pages - maybe check if you are duplicating and/or overwriting some css
why does it blink from time to time? i see the blinking on the clone project also
I'll have to investigate. Would you be able to send a screenrecording?
same!
anything we can do about the flickering when it starts over?
It shouldn’t do that. Your gap setting might be off? Is the example flickering for you too?
if we want to pause the marquee so that user can click and select the image how are we going to do that?
you can set the animation play state to paused with the :hover pseudo selector.
@@webbae thanks! also this is the most perfect way of creating a marquee that i have come across yet! so simple, so seamless, no weird restarts, no gaps.. just stunning!
Nice one...but how to decrease the space between the images... We set 1rem but its not really 1 rem its greater than that
you might not have enough images in the content div to "squish" then together and enforce the 1 rem gap. Or you might have your base font size different. Hope that makes sense
@@webbae that makes sense.... thanks
sorry I am slow, do you have the html text I can copy and I will make changes as I go
I don't but you could open up the webflow cloneable and copy/paste from inspector or export the code if you have the right workspace plan.
this saved me, the native interactions are so choppy when building these
I’m so glad it could help! In my latest live stream I used splide With the auto scroll extension to build a similar component, you might be interested in checking that out too
Yoloing a Website for Dann Petty
th-cam.com/users/liveHoY_OKfFy_U?feature=share
whenever i put my images instead of the ipsum logo's, they start skipping..
there are a lot of helpful tips in the comments. It may have to do with widths of items (check inspector).
If that's troublesome - try my splide auto scroll cloneable: webflow.grsm.io/cloneable-is-bae?sub1=splide-template-with-autoscroll
from where you add scroll combo class?
maruqee-content - can you check the cloneable?
Yes, but how do you get it to tilt like in the thumbnail?
My guess is that you will need to be able to extend the edges past the VW and then add your rotation.
yup that's it! Hop on in the discord if you need help: discord.gg/nN4ZbGem
Works a charm, thank you!
Does this work with a collection list? I've tried about 5 different solutions and none of them seem to...
I haven’t tried with CMS but I don’t see why not. Send me a preview link?
You my friend are a master!❤ Thank you!
This is great, only thing is I get a gap between marquee content blocks, and second one just appears in the middle. Discord invite expired, any other way I get some help? Thanks! 🙏
here you go: discord.gg/pwfDptfBZb
So clean 🧼 seeing that adaptive preview! Gotta have that display 💪🏼
TBH the tag does go hard but MDN had to kill it 😢
Hey bro, whenever I swap my logos for the ones I want to use, the marque starts skipping, leaving a big gap then skips to the beginning again! Any ideas?
Check the comments for some ideas. Setting width to 100% and loading to eager helps. You might also need to play with the number of logos in your content div.
@@webbae Bro I dunno, where do i set the 100% width to? to the marquee? How do I change the loading?
@@Binyamin1444 It just doesnt work for anything besides .svg
Reminiscent of childhood snow days, watching the schools scroll by on the bottom of the news channel indicating if they were still open. Needed them to scroll at faster rate!!
We always gotta keep the school board in check with the scrolling marquees. Make sure the kids get their snow days! I’m talking to YOU Carmen Gisell!
And YOU Heather Richard Shannon!!
How do i add more images? it overlaps all the time?
try setting flex child sizing to none and width to 100% on the element.
Does this work with Showit too? And if so, where do I add the text I want as an infinite marquee?
Have never used showit but it supports HTML and CSS then it should work!
Happy New Year and thank you for sharing. The marquee is working perfectly in Safari and Chrome.
I noticed a strange loop issue using Firefox, though. Simply add 8 images with 650x500px dimension to the marquee-content. The marquee flickers and the loop interrupts on Firefox. Adding 6 images instead shows smooth marquee. It could be related to max dimension? I have set loading to eager, width to 100% and also added -webkit-transform: translateZ(0) to no avail. Is it Firefox bug?
Hey Tom! Unfortunately not sure on this one :(. Sounds like something to do with Firefox like you mentioned but I can't say for sure.
Very nice! I like this setup for a basic marquee, but if you want mouse interrupts where you can pause it when mouse enters and scroll with trackpad, I need a more advanced solution.
GSAP will have you covered for that - I have a video in that too :). This one could do the hover effect with an extra line of css I think someone already asked about that in the comments.
@@webbae Eager to know the code. Pls.
@@avinashnamadhari here you go: webflow.grsm.io/cloneable-is-bae?sub1=infinitie-marquee-pause-hover
is there any way to do this on a curve or at an angle?
curve would be tough but you could rotate the whole thing and extend it a little beyond 100%
@@webbae interesting idea thanks. i ended up finding a way to do this using some embedded javascript
Works perfect! Thanks!
Thanks for sharing! Is it possible to change the speed? Feels a little quick currently.
Yes just adjust the value in the css code.
It breaks when we add more image to it.
Be sure to check the comments section for a lot of good tips!
There a big uneven gap in between the text.
feel free to send along a read-only or live preview and I'll see if I can help.
I tried to add more than 2 marque-content but it doesn't work :(
pop in discord and provide a link if you need help.
Hey! Thanks for the video. Just have a question: if I have several marquees, how can I make one of them scroll in the opposite direction?
Change the translateX(calc(-100% - 1rem)) to positive 100% ought to do it.
@@webbae it does move to the right but it creates a skip starting from the beginning
Thanks for the awesome vid man! Everything works except on my puplished mobile site, logos are randomly disappearing at times. Not sure if you have any advice or have seen this before? Cheers
same. On webflow preview everything looks clean, but on published mobile device the logos are ways slower and even disappearing.
That’s not cool. Sorry about that. I’ll look into this.
Was able to fix the issues - make sure any images that will be off screen have loading set to "eager." I also set width to 100%. For text, I added a class of "hide" to the second text elements inside the content divs. It seems to perform best on mobile when you don't add more to the content div than what should render on screen. Preview link with fixes to follow once you guys confirm the fixes work for you.
Preview of fixes: preview.webflow.com/preview/wb-infinite-marquee-c9304d09ef2d1f9aad2?preview=4810fc9081737a6ecb84531580f071c9&workflow=preview
Works for me on safari and chrome iPhone 14
Thanks a lot for this video! This method is so much better than using the Webflow interactions!
Glad it helped!
Anyone know how to do a fade ramp -- on the edges?
Check out this cloneable by Khrystyna Liubynska which uses absolute divs with linear gradients. You might also be able to use CSS :before and/or :after pseudo elements to do it.
webflow.grsm.io/cloneable-is-bae?sub1=logo-marquee-dual
@@webbae Thanks Brother!
hi there - super cool tutorial, thank you! Is there any way to solve issues when marquee is position absolute? As soon as I put the marquee div block as absolute it doesn't work as intended. I tried putting it in the wrapper that would be absolute so the marquee is static, but it also causes issues. I'm trying to use a marquee as a part of the design on the website in a specific place (rather then going across the whole page).
Hey hard to tell without an example to debug. Discord is for that.
Great stuff, my marquees sorted :)
💯 💯
Thanks for the amazing tutorial. Any major difference you noticed between this and the GSAP one?
Major difference is CSS vs. JS. CSS I like because it's a simple copy/paste job and run in Webflow designer. JS I like because I feel like I have more control - I had one subscriber modify it so it scroll top to bottom instead. There's a lot of content on the web saying CSS animation outperform JS but the true answer is "it depends" I believe. In general I find myself reaching for Javascript when doing animations these days but that's probably just because I use it for so many other things too. CSS is capable of some really amazing stuff.
Best Marquee ever... Made mine great... Thanks so much...
thanks!
Hey Keegan, this is easily one of the simplest marquee!
BTW, would love to know how to stop the scrolling animation on hover interactions, say helping the user to read and/or click link in the text content.
Thanks!!
I think you posted in Discord but here's a cloneable that does that: webflow.grsm.io/cloneable-is-bae?sub1=infinitie-marquee-pause-hover
Cool, gives the page that live news feel of the big boys.
Dude I love you! Thank you so much🙏
Appreciate your support!
This animation does not work in safari.
it does, but it can have issues depending on how you set it up. Please check the comments section for important updates and fixes from the community.
Apologies late to the party here! Thanks for this great marquee! Is it possible on mobile to make it animate slightly faster? Let me explain I've I've got 5 logos scrolling and 5 other in reverse and its set to '20s' and it works perfectly on desktop and tablet at that speed but on mobile portrait and landscape it slows to a snail's pace? :( Is it something I'm doing?
you could use a CSS media query to accomplish that... something like:
/* Media query for mobile */
@media (max-width: 600px) {
.scroll {
animation-duration: 30s; /* Adjust the speed for mobile */
}
}
@@webbae Thanks for this! Although i may be design savvy unfortunately I'm not coding savvy :)...but i'm learning! But now you've explained...it makes perfect sense!
Like i say coding is not my expertise...so am i right in thinking if i place the media query like this?...
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 1rem));
}
}
.scroll {
animation: scroll 30s linear infinite;
}
.reverse {
animation-direction: reverse;
}
* Media query for mobile */
@media (max-width: 600px) {
.scroll {
animation-duration: 30s; /* Adjust the speed for mobile */
}
}
That was really useful thank you. 😇
I love css-only solutions.
yes need more of these. Looking forward to CSS view transitions, scroll-driven animation, and :has selector!
Very nice tutorial, easy to follow. And yes, I do change text color instead of background all the time and then wonder why it is not working haha
Great work man!
Any tips on how to do this using a CMS collection?
Thanks dude.
Sure thing - essentially I would just map each collection item to "marque-image" and then the collection list would map to the "marque-content" div. Hope that helps!
Thank you so much! you gained a new subscriber
Thanks for the sub!
Great video. Thanks my man.
You bet
I get glitches when I change the speed (% in the embed). Any ideas man? Thanks dude! Flex GAPS are both set to 1.
Sometimes it needs a refresh or click of the preview button to "reset" but should still work on the published site. Swing by the Discord if you still need help: discord.gg/eun35XFA
Please could I have another invite?
how do I get into the discord dude?
Thank you man!! :)
Happy to help!
Did webflow look like this 1 year ago!?
haha yes.
Wow. Great video my friend.
thank you
Do this work with wordpress?
I've never used wordpress but I don't see why not.
Works great!!
Glad to hear!
im getting skipps. what might that be?
Hey Joe - lots of info in the comments about little fixes you can try depending on what may be causing the skips. Feel free to hop in Discord and share a link too.
How does it compare to Relume's solution? Neat.
Not familiar with their marquee solution but in general they make really quality stuff so I'm sure it's top notch too.
Nice, thanks!
You bet!
NICE! Thanks for sharing!
Probably the best solution I can find, but doesn't seem to work well on Safari. Anyone know of a fix for this?
Hey Sam there are a number of ideas to explore in the comments for fixes across various browsers. Hard to troubleshoot without a minimum example of the problem you are facing though!
Hi Web Bae, amazing tutorial thank you very muhc for your content. How can i rotate the marquees without having them cutted? Thanks again keep up with your good work.
Hey Pedro - a few steps: 1. Extend the width to something like 110%. 2. Translate X left -5% (or whatever half of width%-100) is. 3. Rotate! 4. Set parent wrapper… probably the section… to overflow hidden to prevent horizontal scroll issues. Good question maybe I’ll make a quick video in that.
@@webbae already tried something like that but it still cuts on the left and adds horizontal scroll even if the marquee is set to overflow hidden. And if i make the section overflow hidden the marquee does something weird that gains some kind of padding that follow the height of the section. Maybe im doing something wrong. Thanks for the quick answer
@@pedromrr7 I’ll try to take a look when I get back to my desk
how can you say you cant find a better infinite marquee and does not even explain how it works on mobile...
Works on my machine! 🙃
thank you for your answer, i really appriciate it. It would be awesome if you explained what to do, because i have 2 different marquees on my home page now. I followed every step, only I did it with text, so I have 1 container and 2 containers and in each one 8 words.
did you read through the comments and the description block? There are sometime where you may need to make adjustments to getting it to work. My inclination is that the text may be too long or something and sometimes safari doesn't like that. Hard to say without being able to inspect though.
Agree, this is the best one)
Genius!!!!!! Thanks 🙏
Glad it helped!
This is Absolutely the Best
Thank you!
THANK YOU. The other tutorials that are unresponsive are just... stupid
Thanks for sharing
There’s a lot of bugs with responsiveness.
Check the comments for lots of good ideas for fixes and other issues.
How do I -> 2. Set loading to eager on all images@@webbae
GENIOUSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
your mic is killing my ears
Hey sorry about that. I can try turning down the gain next time. Is it too loud? Fuzzy? Crackling?
@@webbae the treble sounds too high, it sound too harsh
@@RajivB. Thanks I'll play around with my audio settings for next video.
d
total bs
Thank you for this outstanding comment. You win comment of the month award! 🥳
@@webbae 😂😂😂😂😂😂
Wow!!! Thank you Web Bae!
You bet!
I tried making this with a collection list, there's a little work around that needs to be added.
This example doesn't take into account the extra div (collection list wrapper), so it needs to be deleted on load (this doesn't affect the CMS items).
Here's the script I added to handle this (it may need to be adapted to your build):
$(document).ready(function() {
$('.marquee-content').each(function() {
const marqueeContent = $(this);
const marqueeWrapper = marqueeContent.parent('.marquee-wrapper');
// move marqueeContent out of the wrapper
marqueeWrapper.before(marqueeContent);
// Delete marqueeWrapper
marqueeWrapper.remove();
});
});
thanks for sharing!
Thank you!