wow.thank you very much! this worked perfectly on first attempt.the pace and attention to details were important. definitely subscribed and liked button! i love webflow but just a few months in, and i struggle a bit with the animation. so thank you.
Nelson - gotta tell you this. You made this like three months ago but today is the day I needed it. Took several trial and errors but finally got it working! Please keep making videos today cuz I might need in in a week or a year!
Thanks for this! For anyone wondering, I made mine so that the images don't resize when the screen gets smaller by: - Make the "Wrapper" relative - Make the "Marquee Wrapper" absolute - Give the "Card" a specific height and width
@@ejclearwater The same thing happened to me!! The only thing I could do to make it look good (with the right size on different breakpoints) was to adjust the width (%) of each card. That worked in my case!
Hey @pixelgeek ! This is awesome! I notice that at the end of my scroll it suddenly jerks back to the beginning and resets. Anyway to have that not happen? or did I miss something?
Hey man don't know if you're gonna read this but THANK YOU THANK YOU THANK YOU. I've been trying the past 4 hours to get something like this set up. Thanks you kind sur
Hello Norm, I am caught up in a similar situation at the moment. I was wondering if you got an answer to this or figured it out. If yes, I will be more than happy you shared. Thanks
any idea how to make this with dynamic content? having a fixed width like 200% or something makes it difficult to insert elements that don't have the same width...
Hey man, great video. I have a question - any idea on how to make it so that this goes in the reverse direction? I have a string of logos - top half is working perfectly going from essentially right to left but the bottom section I wanted for it to go the other way so that it creates a bit of a contrast. Any advice will be really helpful! Thanks man!
Hi Nelson, great video, thank you for making it! Just wanna ask though, how do I make a marquee that moves vertically and not horizontally? Do I set the div blocks to on top of each other and select hide overview too? And Instead of setting the interaction on the X axis, do I set it on the Y axis instead?
Hi Nelson Abalos Jr. nicely done! I'm trying to do something with this kind of interaction and is to make it stop on hover and re play it when hover out. Can that be done?
That cannot be done without having to add custom code. I'm not sure how to do it exactly and if a client asked me to do this, I'd suggest using a slider instead.
@@pixelgeek Look I have this animation below the NavBar in this website with a collection list that shows the latest content of this magazine www.revistalevel.com.co What I would love to achieve is to make it like the Bloomberg page that has a similar animation but when you hover it stops and at hover out it play again: www.bloomberg.com/
Works well for larger screens, but in responsive design starts to fail (overlap) on mobile screens. Any tips to fix this? I saw one comment suggesting GRIDS is a better way to go? Thanks
Awesome tutorial as always! Struggling with one thing though, seems when i start making the screen size smaller the second wrapper overlaps the first. They just topple over each other the lower the resolution. Any insight on this would be awesome!
I had this same issue because of the sizes of cards I was using. I solved it by setting a Min W setting instead of setting Width. "marquee wrapper": Width = Auto and Min W = 200% "marquee": Width = Auto and Min W 50%
Hi Nelson. Great video. I have a project where this animation it's needed to be done on a text and go another way around. I experiment a little but can't get it to work as intended. Do You have maybe any tips about how to make it work? Cherrs man!
If you add more content than nelson added, you might face overlapping issues. To fix this, change the width of the marquee to 100% instead of 50%. So it should be: Marquee wrapper width: 200% Marquee width: 100% each
Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board: chat.pixelgeek.community/c/project-help
This version has so many flaws - mainly when going responsive. For those of you who have trouble with the overlap, you are best creating a GRID within a GRID and doing it this way. That way you can resize in each cascade without an ill effect - naturally you'll have to increase the size for larger screens to stop the stretch and animation resetting in the middle of the page.
great stuff thanks for sharing really useful to work through this to try out the concept - that 0 duration snap to begining thing is marvellous! Im thinking overall this marquee is more a desktop and tablet thing and maybe you would hide it on mobile and show static image of say client logos instead - what does everyone think?
Hi! thank you a lot for your tutorial. I have one problem: when I turn on ''hidden overflow'' on the wrapper section, there is only Marquee 1 visible and moving. Others are hidden... Could you please advise what could be the problem?
I was thinking how to make it stop on hover and continue on hover out without resetting. Just stops at the current position and continue from there when you hover out
Help - I got this working. It moves right to left. But I need to it move left to right - I can't seem to wrap my head around the numbers to make it work? Can you show or explain?
@@pixelgeek see the two rows of moving logos - the client wants one row to move left and the other to move right - notice I also change the two so the move at slightly different speeds. preview.webflow.com/preview/cheapworkcomp-com?preview=704b8d6c5967f1973921ddb1b041edb0&mode=preview
But the REVERSE doesn't work, as Interaction! If I set the directions to be the reverse 100% - 0% - 100% it leaves a gap.... The normal interaction starting with minus " -100% - 0% - -100% " has a continuous loop. Do you know how I could fix this?
Thanks Nelson. Quick question: why do you need the two 50% Marquee divs? Why can't you just put the cards directly into the 200% wrapper and move that whole thing?
great question :) If you did that, you would have a gap in the content. Here is a video to explain: www.loom.com/share/b1c6bc1ef5a24358b538a1f0d4b9f8d1
Hello Nelson! I just recently discovered you while learning about Webflow. I really like this scrolling marqee. How may I use a different background image for each box? Thank you.
Nelson, one question. How can you stop the carrousel marquee on mouse hover. I'm trying to make a testimonial infinite marquee and want it to stop on hover so that people can read the testimonial. Could you show us how?
does anyone know how to best do this with text instead of images? I've got it working but there is an awkward jump from the beginning to the start, it's not seamless
I've tried the marquee multiple different ways, and even thought it always flows nicely, no matter what I do I'm always left with a horizontal scroll bar. Any advice?
Hey Nelson, really nice tutorial again! you should be getting more attention! tutorial idea: how to animate text in a word that is changing all the time like in this hero section: briarsatlas.com All text animation tutorials i can find are shaking the text or moving it or twisting it, but no one says how to make it switch words
Awesome series, thanks for taking the time to share this! For the next episode, do you know how we could create this mobile nav in Webflow? dribbble.com/shots/6005981-Tab-Bar-Animation-nr-2
![[UNCUT] บอสพอล แผลงฤทธิ์ บอสพระ-นักร้อง ก. โดนแฉยับ! I คนดังนั่งเคลียร์ I 21 ต.ค. 67](http://i.ytimg.com/vi/XKf6HeftoPI/mqdefault.jpg)
wow.thank you very much! this worked perfectly on first attempt.the pace and attention to details were important. definitely subscribed and liked button! i love webflow but just a few months in, and i struggle a bit with the animation. so thank you.
Nelson - gotta tell you this. You made this like three months ago but today is the day I needed it. Took several trial and errors but finally got it working! Please keep making videos today cuz I might need in in a week or a year!
Thanks for this!
For anyone wondering, I made mine so that the images don't resize when the screen gets smaller by:
- Make the "Wrapper" relative
- Make the "Marquee Wrapper" absolute
- Give the "Card" a specific height and width
Doesnt work, my 'cards' are now overlapping...??
Just use flex-shrink: 0 on your flex childrens
@@ejclearwater The same thing happened to me!! The only thing I could do to make it look good (with the right size on different breakpoints) was to adjust the width (%) of each card. That worked in my case!
@@ejclearwater yes u obviously need to use different class name for marquees now or theu go same position.
Hey @pixelgeek ! This is awesome! I notice that at the end of my scroll it suddenly jerks back to the beginning and resets. Anyway to have that not happen? or did I miss something?
did anyone pick up on this as I am having the same issue
@@Whittledesignstudio same
Damn can't believe you made this more than 2 years ago. I miss these cool tutorials! You're the ultimate Webflow OG!
I revisit this tutorial every 6 months - best architecture that I've come across. Thank you Nelson.
AWESOME!!! I've been looking EVERYWHERE for this!!!
Hey man don't know if you're gonna read this but THANK YOU THANK YOU THANK YOU. I've been trying the past 4 hours to get something like this set up. Thanks you kind sur
You're welcome 😁
Great Tutorial! But how do you pause the animation on hover?
That was awesome, thank you very much bro, I miss more videos like this.
Just want to thank you for your delightful and informative tutorials Nelson! Couldn't have done it without you! 😉
This was great for logos! I was wondering how you can make a second row go in the opposing direction?
Works perfectly for me so far. Thanks, Sir Nelson.
Hey Nelson, how would you add a stop on hover for a specific card. So the marquee would pause while a card is being hovered over. Cool thanks!
I also wonder!
Hello Norm, I am caught up in a similar situation at the moment. I was wondering if you got an answer to this or figured it out. If yes, I will be more than happy you shared. Thanks
@@louis3874 custom JS. Slickity slider
For months I couldn't find how to do it! Than you
any idea how to make this with dynamic content? having a fixed width like 200% or something makes it difficult to insert elements that don't have the same width...
thanks a lot for your videos! You explain it so well, and they always work in the end. :) thanks!
Thanks! This was super helpful + easy to follow.
haha love the live music à la DaftPunkesque!
Thank you for making this how-to! Also, love your glasses - what's the brand??
Thanks for watching. I wear Warby Parker's.
How do you do this with a cms collection
Hey man, great video. I have a question - any idea on how to make it so that this goes in the reverse direction? I have a string of logos - top half is working perfectly going from essentially right to left but the bottom section I wanted for it to go the other way so that it creates a bit of a contrast. Any advice will be really helpful! Thanks man!
Hi! Did you figure it out? I need to do the same thing!
love the tutorial! what I was looking for!
This was so helpful thanks pixelgeek!
@pixelgeek, thanks, this project doesn't appear to be cloneable anymore?
Thank you for this, just needed it right now :P
Here's an easier way th-cam.com/video/bKRxAuec1sc/w-d-xo.html
Thank you mate you helped me a lot!
Nice tutorial, good explained. Thank !
Hi Nelson, great video, thank you for making it! Just wanna ask though, how do I make a marquee that moves vertically and not horizontally? Do I set the div blocks to on top of each other and select hide overview too? And Instead of setting the interaction on the X axis, do I set it on the Y axis instead?
Wow Nelson this one was simple & very useful! Thanks! 🙏🏾
Your welcome 😁
Hi Nelson Abalos Jr. nicely done! I'm trying to do something with this kind of interaction and is to make it stop on hover and re play it when hover out. Can that be done?
That cannot be done without having to add custom code. I'm not sure how to do it exactly and if a client asked me to do this, I'd suggest using a slider instead.
@@pixelgeek Look I have this animation below the NavBar in this website with a collection list that shows the latest content of this magazine www.revistalevel.com.co
What I would love to achieve is to make it like the Bloomberg page that has a similar animation but when you hover it stops and at hover out it play again: www.bloomberg.com/
good one! So useful and so simple. Thank you.
Thanks for watching. 😁🙇🏽♂️
Works well for larger screens, but in responsive design starts to fail (overlap) on mobile screens. Any tips to fix this? I saw one comment suggesting GRIDS is a better way to go? Thanks
Thank you so much. You helped me a lot. Cheers!
really like it. Thanks Pixelgeek :)
Awesome tutorial as always!
Struggling with one thing though, seems when i start making the screen size smaller the second wrapper overlaps the first. They just topple over each other the lower the resolution.
Any insight on this would be awesome!
I had this same issue because of the sizes of cards I was using. I solved it by setting a Min W setting instead of setting Width.
"marquee wrapper": Width = Auto and Min W = 200%
"marquee": Width = Auto and Min W 50%
@@TheMrshawnpaul Nice!
@@TheMrshawnpaul was having this issue and this solved it!
Hi Nelson. Great video. I have a project where this animation it's needed to be done on a text and go another way around. I experiment a little but can't get it to work as intended. Do You have maybe any tips about how to make it work? Cherrs man!
Nice tutotial. Would be recreating.
Thanks so much, man!
My pleasure 😁🙇🏽♂️
Hi is there a way to export this marquee to Shopify in an existing theme?
If you add more content than nelson added, you might face overlapping issues.
To fix this, change the width of the marquee to 100% instead of 50%.
So it should be:
Marquee wrapper width: 200%
Marquee width: 100% each
Thank you so much! Was looking for this.
Amazing!!! How can I make the animation stop on hover? :D!
Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board:
chat.pixelgeek.community/c/project-help
This version has so many flaws - mainly when going responsive. For those of you who have trouble with the overlap, you are best creating a GRID within a GRID and doing it this way.
That way you can resize in each cascade without an ill effect - naturally you'll have to increase the size for larger screens to stop the stretch and animation resetting in the middle of the page.
great stuff thanks for sharing really useful to work through this to try out the concept - that 0 duration snap to begining thing is marvellous! Im thinking overall this marquee is more a desktop and tablet thing and maybe you would hide it on mobile and show static image of say client logos instead - what does everyone think?
How would you make it more seamless
How we can reverse flow - like - instead of Right to Left - Left to Right.?
Trying to do the same thing right now and having no luck *facepalm
You’re the man, Nelson!
Thanks 😁👍
Hi! thank you a lot for your tutorial.
I have one problem: when I turn on ''hidden overflow'' on the wrapper section, there is only Marquee 1 visible and moving. Others are hidden... Could you please advise what could be the problem?
Great tutorial, thank you
Glad you enjoyed it!
I was thinking how to make it stop on hover and continue on hover out without resetting. Just stops at the current position and continue from there when you hover out
Hmmm... You may need custom code for that. But an alternative would be to use a slider.
I have the same question, looking forward to know how to do it!
Nicolás Márquez Trying so e stuff but with no success for now 😀
Thanks Nelson for the help. Means a lot to me! I would love to show you my portfolio that I built using a lot of your tips. Albion; UT Austin student.
Happy to help 😀. Yes please show me your portfolio.
Help - I got this working. It moves right to left. But I need to it move left to right - I can't seem to wrap my head around the numbers to make it work? Can you show or explain?
can you post your read-only link so i can take a look?
@@pixelgeek see the two rows of moving logos - the client wants one row to move left and the other to move right - notice I also change the two so the move at slightly different speeds. preview.webflow.com/preview/cheapworkcomp-com?preview=704b8d6c5967f1973921ddb1b041edb0&mode=preview
But the REVERSE doesn't work, as Interaction! If I set the directions to be the reverse 100% - 0% - 100% it leaves a gap.... The normal interaction starting with minus " -100% - 0% - -100% " has a continuous loop. Do you know how I could fix this?
Thanks Nelson. Quick question: why do you need the two 50% Marquee divs? Why can't you just put the cards directly into the 200% wrapper and move that whole thing?
great question :) If you did that, you would have a gap in the content. Here is a video to explain: www.loom.com/share/b1c6bc1ef5a24358b538a1f0d4b9f8d1
You are king, THANKS!!!
You're welcome!
any tips on how to make this go the other way without having a blank space coming from the left?
Hello Nelson! I just recently discovered you while learning about Webflow. I really like this scrolling marqee. How may I use a different background image for each box? Thank you.
Hi Cathy :) Thanks for watching. Try adding a unique combo class to each box and giving each one a different background image. Hope this helps.
@@pixelgeek I tried it and it worked! Thank you soooo sooooo much!
this is MAGIC thank you 🙏
My pleasure 😁🙇🏽♂️
Is there a way to make this vertically without it going on to other sections?
Nelson, one question. How can you stop the carrousel marquee on mouse hover. I'm trying to make a testimonial infinite marquee and want it to stop on hover so that people can read the testimonial. Could you show us how?
Hello Mario, I am caught up in the same situation presently. Did you get this done?? If yes, I will be happy you shared. Thanks
@@louis3874 sorry Louis, I couldnt figure it out so I removed it from the website :(
@@mariorruiz framer has it built in, so much easier. i dont get why a simple marquee is so hard on webflow.
maybe now we could get an answer to the mystery now Nelson left webflow
@@whiteswordwarrior9995
How do you make it go the other way..
use a positive value on the interaction. 100% on x axis instead of -100%
haha tried it myself and just saw that theres an alignment problem, since the marquees are aligned left.. trying to figure it out and post the result
position relative and move the wrapper div 100% to the left
Can someone help, please? I need to put 10 items in 1 marquee div (50%), but I want to limit the display to only 5 on the screen.
how to move it reverse direction please?
Thanks so much, I am learning so much :) Cheers
Glad the videos are helping you. 😁 Let me know if you have any suggestions for a future video.
does anyone know how to best do this with text instead of images? I've got it working but there is an awkward jump from the beginning to the start, it's not seamless
This is my issue here too! DId you end up figuring it out?
Can you please make the webflow page cloneable? :)
I've tried the marquee multiple different ways, and even thought it always flows nicely, no matter what I do I'm always left with a horizontal scroll bar. Any advice?
On parent element, in this case the "wrapper", set Width to 100VW or smaller and change Overflow property to Hidden.
Thank you so much!
You're welcome!
thanks man!
Happy to help! :D
clone link doesnt work anymore
I hate when TH-cam shows the video in low res ARGHHH! Thanks for the tutorial.
Thanks for being the first one to watch the video 😁🙇🏽♂️
Nelson is hero
awww. thank you! 😁 Glad these videos are helping you.
Marquee Mark & the Flexbox Bunch.
6:03 Coffee Break
Marquee mark the wrapper
Hey Nelson, really nice tutorial again! you should be getting more attention!
tutorial idea: how to animate text in a word that is changing all the time like in this hero section: briarsatlas.com
All text animation tutorials i can find are shaking the text or moving it or twisting it, but no one says how to make it switch words
thanks for the suggestion :) I have added it to my list.
Awesome series, thanks for taking the time to share this!
For the next episode, do you know how we could create this mobile nav in Webflow?
dribbble.com/shots/6005981-Tab-Bar-Animation-nr-2
I'll put this on my list :) Thanks for watching and for the suggestion.
this would be awesome