How to Webflow: Infinite marquee - Tutorial (2019)

This trick is good for scroll text, testimonials, company logos, etc.
Clone the project here:
webflow.com/website/infinite-...
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pxlgk.com

[@rogerridpath1107]

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!

[@danielapro9755]

Damn can't believe you made this more than 2 years ago. I miss these cool tutorials! You're the ultimate Webflow OG!

[@samyabbas92]

I revisit this tutorial every 6 months - best architecture that I've come across. Thank you Nelson.

[@earthtowill8670]

AWESOME!!! I've been looking EVERYWHERE for this!!!

[@robertfigueroa425]

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.

[@DupontGreenpoint]

Just want to thank you for your delightful and informative tutorials Nelson! Couldn't have done it without you! 😉

[@baron5978]

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]

Doesnt work, my 'cards' are now overlapping...??

[@MTrof]

Just use flex-shrink: 0 on your flex childrens

[@rociogarcia1121]

@@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!

[@whiteswordwarrior9995]

@@ejclearwater yes u obviously need to use different class name for marquees now or theu go same position.

[@juancastrillon5255]

That was awesome, thank you very much bro, I miss more videos like this.

[@jfelixgonzalo9792]

love the tutorial! what I was looking for!

[@taiworufuscovenant8009]

Works perfectly for me so far. Thanks, Sir Nelson.

[@Luhman]

Thanks! This was super helpful + easy to follow.

[@owenK1100]

This was so helpful thanks pixelgeek!

[@aleexious2466]

really like it. Thanks Pixelgeek :)

[@shadra8367]

thanks a lot for your videos! You explain it so well, and they always work in the end. :) thanks!

[@OrigamOx]

Nice tutorial, good explained. Thank !

[@ozordiprince9405]

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

[@pixelgeek]

You're welcome 😁

[@zeminem35]

Thank you mate you helped me a lot!

[@MrPedroLalli]

Thank you so much. You helped me a lot. Cheers!

[@joanapfa]

For months I couldn't find how to do it! Than you

[@Wildenfree]

Wow Nelson this one was simple & very useful! Thanks! 🙏🏾

[@pixelgeek]

Your welcome 😁

[@timkaiser1919]

Thank you for this, just needed it right now :P

[@pixelgeek]

Here's an easier way kzbin.info/www/bejne/mHy1qXSrmshkqcU

[@des7638]

good one! So useful and so simple. Thank you.

[@pixelgeek]

Thanks for watching. 😁🙇🏽‍♂️

[@benfraser209]

You’re the man, Nelson!

[@pixelgeek]

Thanks 😁👍

[@joechan9591]

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?

[@madeleineleddy5681]

this is MAGIC thank you 🙏

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@jonathan69db]

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...

[@tanh8285]

Great Tutorial! But how do you pause the animation on hover?

[@alastair999100]

Great tutorial, thank you

[@pixelgeek]

Glad you enjoyed it!

[@normthomas5028]

haha love the live music à la DaftPunkesque!

[@annachyrva4641]

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?

[@fuseneo]

This was great for logos! I was wondering how you can make a second row go in the opposing direction?

[@PurpleGoril4]

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!

[@albionzogaj8784]

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.

[@pixelgeek]

Happy to help 😀. Yes please show me your portfolio.

[@senhorabdbasit8824]

Nice tutotial. Would be recreating.

[@DesignPilot]

Thanks so much, man!

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@stardustsa2008]

Thanks so much, I am learning so much :) Cheers

[@pixelgeek]

Glad the videos are helping you. 😁 Let me know if you have any suggestions for a future video.

[@johnleighdesigns]

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?

[@tomasz2018]

You are king, THANKS!!!

[@pixelgeek]

You're welcome!

[@floetic]

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

[@nicolashoban7936]

@pixelgeek, thanks, this project doesn't appear to be cloneable anymore?

[@joshuadecker7173]

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?

[@Whittledesignstudio]

did anyone pick up on this as I am having the same issue

[@whiteswordwarrior9995]

@@Whittledesignstudio same

[@lusacu123]

Is there a way to make this vertically without it going on to other sections?

[@Thehouseoftatum]

Hi is there a way to export this marquee to Shopify in an existing theme?

[@felk1765]

any tips on how to make this go the other way without having a blank space coming from the left?

[@MichaelGoesZany]

Thank you for making this how-to! Also, love your glasses - what's the brand??

[@pixelgeek]

Thanks for watching. I wear Warby Parker's.

[@JavinTowers]

Thank you so much!

[@pixelgeek]

You're welcome!

[@dominikmoravcik1896]

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.

[@normthomas5028]

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!

[@amitnaamani5702]

I also wonder!

[@louis3874]

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

[@normthomas5028]

@@louis3874 custom JS. Slickity slider

[@jessicagrainger8181]

How do you do this with a cms collection

[@virathedon]

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?

[@rarepublic5725]

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!

[@rociogarcia1121]

Hi! Did you figure it out? I need to do the same thing!

[@keitharmstrong3657]

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!

[@TheMrshawnpaul]

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%

[@madfishbiscuit]

@@TheMrshawnpaul Nice!

[@inkinikki]

@@TheMrshawnpaul was having this issue and this solved it!

[@vincionyou]

How would you make it more seamless

[@dariostefanutto5780]

thanks man!

[@pixelgeek]

Happy to help! :D

[@nicolasmarquez5956]

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?

[@pixelgeek]

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.

[@nicolasmarquez5956]

​@@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/

[@egglevin]

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?

[@pixelgeek]

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

[@CathyJordanGlobal]

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.

[@pixelgeek]

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.

[@CathyJordanGlobal]

@@pixelgeek I tried it and it worked! Thank you soooo sooooo much!

[@Travelling-Reading-Writing]

how to move it reverse direction please?

[@GracePotter77]

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

[@jacksonrodriguez6961]

This is my issue here too! DId you end up figuring it out?

[@kylejohnston4618]

Can you please make the webflow page cloneable? :)

[@jaimealbertoortizlozano5708]

Amazing!!! How can I make the animation stop on hover? :D!

[@pixelgeek]

Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board: chat.pixelgeek.community/c/project-help

[@bryceheron8748]

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?

[@TheMrshawnpaul]

On parent element, in this case the "wrapper", set Width to 100VW or smaller and change Overflow property to Hidden.

[@peter.dimitrov]

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

[@pixelgeek]

Hmmm... You may need custom code for that. But an alternative would be to use a slider.

[@nicolasmarquez5956]

I have the same question, looking forward to know how to do it!

[@peter.dimitrov]

Nicolás Márquez Trying so e stuff but with no success for now 😀

[@kanishmalviya]

How we can reverse flow - like - instead of Right to Left - Left to Right.?

[@JhpStudios1]

Trying to do the same thing right now and having no luck *facepalm

[@thewebart]

I hate when KZbin shows the video in low res ARGHHH! Thanks for the tutorial.

[@pixelgeek]

Thanks for being the first one to watch the video 😁🙇🏽‍♂️

[@rogerridpath1107]

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]

can you post your read-only link so i can take a look?

[@rogerridpath1107]

@@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

[@mariorruiz]

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?

[@louis3874]

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

[@mariorruiz]

@@louis3874 sorry Louis, I couldnt figure it out so I removed it from the website :(

[@whiteswordwarrior9995]

@@mariorruiz framer has it built in, so much easier. i dont get why a simple marquee is so hard on webflow.

[@mariorruiz]

maybe now we could get an answer to the mystery now Nelson left webflow @@whiteswordwarrior9995

[@fahadiqbal2800]

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

[@jonasbarre8351]

Thank you so much! Was looking for this.

[@whiteswordwarrior9995]

clone link doesnt work anymore

[@roxasinfy8944]

How do you make it go the other way..

[@jonathan69db]

use a positive value on the interaction. 100% on x axis instead of -100%

[@jonathan69db]

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

[@jonathan69db]

position relative and move the wrapper div 100% to the left

[@madfishbiscuit]

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.

[@hal-zeitlin]

Nelson is hero

[@pixelgeek]

awww. thank you! 😁 Glad these videos are helping you.

[@garyvoigt321]

Marquee Mark & the Flexbox Bunch.

[@reecegunningham]

Marquee mark the wrapper

[@vincionyou]

6:03 Coffee Break

[@mariorruiz]

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

[@pixelgeek]

thanks for the suggestion :) I have added it to my list.

[@alexhartan]

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

[@pixelgeek]

I'll put this on my list :) Thanks for watching and for the suggestion.

[@vincionyou]

this would be awesome