How to Webflow: Infinite marquee - Tutorial (2019)

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 135

  • @robertfigueroa425
    @robertfigueroa425 6 місяців тому +2

    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.

  • @baron5978
    @baron5978 4 роки тому +12

    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
      @ejclearwater 2 роки тому

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

    • @MTrof
      @MTrof Рік тому

      Just use flex-shrink: 0 on your flex childrens

    • @rociogarcia1121
      @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
      @whiteswordwarrior9995 Рік тому

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

  • @rogerridpath1107
    @rogerridpath1107 5 років тому +10

    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
    @danielapro9755 2 роки тому +1

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

  • @samyabbas92
    @samyabbas92 2 роки тому

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

  • @earthtowill8670
    @earthtowill8670 2 роки тому +1

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

  • @DupontGreenpoint
    @DupontGreenpoint Рік тому

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

  • @joshuadecker7173
    @joshuadecker7173 4 роки тому +6

    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?

  • @ozordiprince9405
    @ozordiprince9405 Рік тому +1

    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

  • @tanh8285
    @tanh8285 4 роки тому +2

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

  • @juancastrillon5255
    @juancastrillon5255 2 роки тому +1

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

  • @taiworufuscovenant8009
    @taiworufuscovenant8009 Рік тому

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

  • @normthomasmarketing
    @normthomasmarketing 4 роки тому +5

    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
      @amitnaamani5702 4 роки тому

      I also wonder!

    • @louis3874
      @louis3874 3 роки тому

      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

    • @normthomasmarketing
      @normthomasmarketing 3 роки тому

      @@louis3874 custom JS. Slickity slider

  • @jonathan69db
    @jonathan69db 4 роки тому +2

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

  • @fuseneo
    @fuseneo 2 роки тому +1

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

  • @MichaelGoesZany
    @MichaelGoesZany 4 роки тому +1

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

    • @pixelgeek
      @pixelgeek  4 роки тому

      Thanks for watching. I wear Warby Parker's.

  • @shadra8367
    @shadra8367 Рік тому

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

  • @nicolasmarquez5956
    @nicolasmarquez5956 5 років тому +1

    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
      @pixelgeek  5 років тому +2

      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
      @nicolasmarquez5956 5 років тому

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

  • @joanapfa
    @joanapfa Рік тому

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

  • @jessicagrainger8181
    @jessicagrainger8181 2 роки тому +1

    How do you do this with a cms collection

  • @Wildenfree
    @Wildenfree 5 років тому +1

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

  • @rarepublic5725
    @rarepublic5725 Рік тому +1

    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
      @rociogarcia1121 Рік тому

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

  • @jaimealbertoortizlozano5708
    @jaimealbertoortizlozano5708 4 роки тому +2

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

    • @pixelgeek
      @pixelgeek  4 роки тому

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

  • @Luhman
    @Luhman 3 роки тому +1

    Thanks! This was super helpful + easy to follow.

  • @nicolashoban7936
    @nicolashoban7936 3 роки тому

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

  • @floetic
    @floetic 2 роки тому

    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

  • @keitharmstrong3657
    @keitharmstrong3657 4 роки тому +3

    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
      @TheMrshawnpaul 3 роки тому +3

      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%

    • @philanthonyuk
      @philanthonyuk 3 роки тому

      @@TheMrshawnpaul Nice!

    • @inkinikki
      @inkinikki 2 роки тому

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

  • @peter.dimitrov
    @peter.dimitrov 5 років тому +2

    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
      @pixelgeek  5 років тому

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

    • @nicolasmarquez5956
      @nicolasmarquez5956 5 років тому

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

    • @peter.dimitrov
      @peter.dimitrov 5 років тому +1

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

  • @albionzogaj8784
    @albionzogaj8784 4 роки тому +1

    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
      @pixelgeek  4 роки тому

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

  • @dominikmoravcik1896
    @dominikmoravcik1896 3 роки тому

    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.

  • @owenK1100
    @owenK1100 3 роки тому

    This was so helpful thanks pixelgeek!

  • @Thehouseoftatum
    @Thehouseoftatum 2 роки тому

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

  • @timkaiser1919
    @timkaiser1919 2 роки тому

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

    • @pixelgeek
      @pixelgeek  2 роки тому

      Here's an easier way ua-cam.com/video/bKRxAuec1sc/v-deo.html

  • @virathedon
    @virathedon 4 роки тому

    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?

  • @joechan9591
    @joechan9591 3 роки тому

    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?

  • @jfelixgonzalo9792
    @jfelixgonzalo9792 4 роки тому +1

    love the tutorial! what I was looking for!

  • @kanishmalviya
    @kanishmalviya 4 роки тому +1

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

    • @JhpStudios1
      @JhpStudios1 4 роки тому

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

  • @mariorruiz
    @mariorruiz 5 років тому +1

    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
      @louis3874 3 роки тому

      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
      @mariorruiz 3 роки тому

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

    • @whiteswordwarrior9995
      @whiteswordwarrior9995 Рік тому +1

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

    • @mariorruiz
      @mariorruiz Рік тому

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

  • @PurpleGoril4
    @PurpleGoril4 4 роки тому

    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!

  • @felk1765
    @felk1765 3 роки тому

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

  • @rogerridpath1107
    @rogerridpath1107 4 роки тому +1

    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
      @pixelgeek  4 роки тому

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

    • @rogerridpath1107
      @rogerridpath1107 4 роки тому

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

  • @annachyrva4641
    @annachyrva4641 3 роки тому

    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?

  • @vincionyou
    @vincionyou 3 роки тому

    How would you make it more seamless

  • @OrigamOx
    @OrigamOx 3 роки тому

    Nice tutorial, good explained. Thank !

  • @fahadiqbal2800
    @fahadiqbal2800 Рік тому +1

    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
      @jonasbarre8351 Рік тому +1

      Thank you so much! Was looking for this.

  • @aleexious2466
    @aleexious2466 5 років тому +1

    really like it. Thanks Pixelgeek :)

  • @johnleighdesigns
    @johnleighdesigns 5 років тому

    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?

  • @benfraser209
    @benfraser209 5 років тому +1

    You’re the man, Nelson!

  • @roxasinfy8944
    @roxasinfy8944 4 роки тому +2

    How do you make it go the other way..

    • @jonathan69db
      @jonathan69db 4 роки тому

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

    • @jonathan69db
      @jonathan69db 4 роки тому

      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
      @jonathan69db 4 роки тому +1

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

  • @GracePotter77
    @GracePotter77 4 роки тому +1

    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

  • @Travelling-Reading-Writing
    @Travelling-Reading-Writing Рік тому

    how to move it reverse direction please?

  • @egglevin
    @egglevin 5 років тому

    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
      @pixelgeek  5 років тому

      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

  • @senhorabdbasit8824
    @senhorabdbasit8824 Рік тому

    Nice tutotial. Would be recreating.

  • @des7638
    @des7638 5 років тому +2

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

    • @pixelgeek
      @pixelgeek  5 років тому

      Thanks for watching. 😁🙇🏽‍♂️

  • @MrPedroLalli
    @MrPedroLalli 4 роки тому +1

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

  • @zeminem35
    @zeminem35 Рік тому

    Thank you mate you helped me a lot!

  • @lusacu123
    @lusacu123 4 роки тому

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

  • @kylejohnston4618
    @kylejohnston4618 2 роки тому

    Can you please make the webflow page cloneable? :)

  • @CathyJordanGlobal
    @CathyJordanGlobal 5 років тому

    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
      @pixelgeek  5 років тому +1

      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
      @CathyJordanGlobal 5 років тому

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

  • @normthomasmarketing
    @normthomasmarketing 4 роки тому +2

    haha love the live music à la DaftPunkesque!

  • @DesignPilot
    @DesignPilot 5 років тому +1

    Thanks so much, man!

    • @pixelgeek
      @pixelgeek  5 років тому

      My pleasure 😁🙇🏽‍♂️

  • @bryceheron8748
    @bryceheron8748 3 роки тому

    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
      @TheMrshawnpaul 3 роки тому

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

  • @madeleineleddy5681
    @madeleineleddy5681 4 роки тому +1

    this is MAGIC thank you 🙏

    • @pixelgeek
      @pixelgeek  4 роки тому

      My pleasure 😁🙇🏽‍♂️

  • @whiteswordwarrior9995
    @whiteswordwarrior9995 Рік тому

    clone link doesnt work anymore

  • @philanthonyuk
    @philanthonyuk 3 роки тому +1

    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.

  • @tomasz2018
    @tomasz2018 4 роки тому +1

    You are king, THANKS!!!

  • @alastair999100
    @alastair999100 4 роки тому +1

    Great tutorial, thank you

  • @stardustsa2008
    @stardustsa2008 5 років тому +1

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

    • @pixelgeek
      @pixelgeek  5 років тому +1

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

  • @JavinTowers
    @JavinTowers 4 роки тому +1

    Thank you so much!

  • @dariostefanutto5780
    @dariostefanutto5780 4 роки тому +1

    thanks man!

  • @thewebart
    @thewebart 5 років тому

    I hate when UA-cam shows the video in low res ARGHHH! Thanks for the tutorial.

    • @pixelgeek
      @pixelgeek  5 років тому

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

  • @vincionyou
    @vincionyou 3 роки тому

    6:03 Coffee Break

  • @hal-zeitlin
    @hal-zeitlin 4 роки тому +1

    Nelson is hero

    • @pixelgeek
      @pixelgeek  4 роки тому

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

  • @garyvoigt321
    @garyvoigt321 5 років тому +1

    Marquee Mark & the Flexbox Bunch.

  • @reecegunningham
    @reecegunningham 3 роки тому

    Marquee mark the wrapper

  • @mariorruiz
    @mariorruiz 5 років тому

    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
      @pixelgeek  5 років тому

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

  • @alexhartan
    @alexhartan 5 років тому +2

    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
      @pixelgeek  5 років тому

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

    • @vincionyou
      @vincionyou 3 роки тому

      this would be awesome