CREATE AN INFINITE LOOP IN WEBFLOW IN 5 MIN

Поделиться
HTML-код
  • Опубликовано: 13 июн 2024
  • Creating an infinite loop in Webflow is easier than it seems. In this video I'm showing you how to achieve it in 5 min.
    You can clone the project inside your account here: webflow.com/website/Create-an...
    PS: The number of units you move the X axis is dependent on your own image/text. The principle is to move the x axis until the second content DIV is at the same place as the initial state of the first content DIV.
    --
    Got questions about building a website in Webflow?
    You can send me an email at hi@al.vision
    --
    #webflow #tutorial #webdesign
    ----
    If you'd like to see more Webflow content, you can subscribe to the channel: ruclips.net/user/AlVision?su...
    --
    Start using Webflow today: webflow.grsm.io/3424789
    (this is an affiliate link, if you end up getting a subscription I'd get a tiny incentive at no extra cost to you)
    --
    Thanks for watching the video CREATE AN INFINITE LOOP IN WEBFLOW IN 5 MIN

Комментарии • 69

  • @phase4485
    @phase4485 Месяц назад

    I’ve watched a number of these videos and your video is the first that I can understand! Thank you for this. Keep up the good work.

  • @apiant6637
    @apiant6637 2 года назад +20

    Great tutorial! One tiny addition: You may need to set the content-holder Flex Child Sizing to X - Don't shrink or grow if you use images with variable sizes.

  • @yilunlaw7784
    @yilunlaw7784 2 года назад +1

    Wonderful tutorial!!! Somehow I've watched a few tutorials here teaching the same thing but this is the only one I actually understood

  • @garrettgolightly
    @garrettgolightly Год назад

    So many of the template sites that are supposed to make this easy have nothing on this vid! 10/10 THANK YOU!!

  • @jslee738
    @jslee738 Год назад

    Thank you so much!! I just started learning webflow and this helped me a lot!! It’s been like 3 days of trying how to do this and I am having a hard time understanding the video from webflow uni. Of all the tutorials I watched, this is the best. So thank you, thank you!! God bless.

  • @madfishbiscuit
    @madfishbiscuit 2 года назад +3

    Rather than use PX, use % instead as -100% would make it pixel perfect for you there buddy! Great tutorial.

  • @nicolecmar5008
    @nicolecmar5008 3 года назад

    Nice and straight to the point! Thanks! : )

  • @willypdrums4567
    @willypdrums4567 2 года назад

    Thanks for the awesome tutorial man! Keep 'em coming

  • @daannielism
    @daannielism 3 года назад +7

    This channel is amazing! Please don’t give up on it, I’ve learned so many cool tips off it! I had several webflow issues that you helped me so much with. Subbed 4 life

    • @AlVision
      @AlVision  3 года назад

      Happy it could help mate!

  • @virathedon
    @virathedon 3 года назад

    Nice topics! Different from other lessons. Thanks!!

  • @bikachu_
    @bikachu_ 2 года назад

    this video was super helpful, thank you!

  • @andreamaraldg
    @andreamaraldg 2 года назад

    Awesome tutorial. Thanks, man!

  • @tylernelson1356
    @tylernelson1356 3 года назад

    Great Video!!
    I got it working with images as you mentioned - its awesome thanks!

  • @Jonafieg
    @Jonafieg Год назад

    Thank you, this was really helpful.

  • @talaagha9189
    @talaagha9189 2 года назад

    Amazing tutorial helped me a lot
    Thank you 🙏🏼🤩
    Keep up 👍🏼👍🏼

  • @SocialboutMedia
    @SocialboutMedia Год назад

    I love you sir. You've saved me a few times w/ this same method. Thanks a milllllllllllllllion!

  • @user-of3dc9xz1b
    @user-of3dc9xz1b 7 месяцев назад

    THANK YOU SO MUCH!

  • @kunalbelamkar
    @kunalbelamkar 2 года назад

    Thanks man, this works like butter! sub and liked!

  • @JustUXChannel
    @JustUXChannel Год назад

    Thanks for this, really useful!

  • @mikeef747
    @mikeef747 2 года назад

    Thanks this was helpful!

  • @asadkahharov3
    @asadkahharov3 3 года назад

    I love you! Very useful)

  • @1WillyDAVID
    @1WillyDAVID 2 года назад

    awesome, thanks a lot bro, you saved my day, God Bless you!

  • @timon5612
    @timon5612 3 года назад

    You're the man!

  • @mahdighazouani450
    @mahdighazouani450 2 года назад +1

    Thank for the tips :D

  • @rondriessen8603
    @rondriessen8603 2 года назад

    works fine thanks!

  • @ArtfulUI
    @ArtfulUI 2 года назад

    thanks for tutorial!

  • @barbaradoumerc235
    @barbaradoumerc235 Год назад

    THAAAAANK YOUUUUUUU !!!!

  • @GeertClaes
    @GeertClaes 3 года назад +6

    Could you also show how you make this scale on smaller screens? Related to this, is there perhaps an alternative way to do this without having to guess the width of the element holder?

  • @Technicalraj113
    @Technicalraj113 2 года назад

    Thank you so much

  • @frankdrolet9439
    @frankdrolet9439 3 года назад +1

    Vrm cool ta page, continu de partager bro!

  • @luiseduardorojaslarez2036
    @luiseduardorojaslarez2036 Месяц назад

    If you want it to be responsive, when setting the move animation (The one which he sets on -1825) set it on -100vw 😉

  • @user-jr2pf9qt9x
    @user-jr2pf9qt9x 5 месяцев назад

    Thanks broo..

  • @nirladecky667
    @nirladecky667 3 года назад

    EZ-PZ and super awesome thanks!!!

  • @plusxify
    @plusxify 2 года назад

    Great!

  • @nikivyu
    @nikivyu 2 года назад

    Thanks for the tutorial.
    Btw it seems not working if you have custom breakpoints like 1440 and 1920 in Webflow as you are not able to calculate the width for each resolution.

  • @nyesro1353
    @nyesro1353 2 года назад

    Hi! Is there a way i can make something loop but have an element come in and stay while the loop is still constant in the back? Or would I just have to make a really long duration?

  • @finnhanberg
    @finnhanberg 10 месяцев назад

    Is there a way to pause the scroll on hover?

  • @emmagarcia3214
    @emmagarcia3214 3 года назад

    Hello, thanks for this tutorial. I have a question, I made an infinite marquee with images, I add an interaction so when I click in an image it opens some info. I know the interaction is fine, but it's not responding in the marquee. Do you know how could I do it?

  • @jamilahmad1277
    @jamilahmad1277 Год назад

    when viewing it on the mobile screen its scroll too slowly? how we can make it so its slide at same speed both in mobile and desktop?

  • @finnhanberg
    @finnhanberg 10 месяцев назад

    Does this work when resizing the window? Is it responsive to width changes? Nice tuut 👍

  • @jaimealbertoortizlozano5708
    @jaimealbertoortizlozano5708 3 года назад +1

    Great Video! How can i make it stop on hover? :)

  • @tmstmstms
    @tmstmstms 4 года назад

    Thanks for this! Works great on one view but how to you adapt responsively since you're moving by pixel?

    • @tmstmstms
      @tmstmstms 4 года назад +2

      Nevermind! I was doing VW units and not PX!

  • @hubertkaniewski534
    @hubertkaniewski534 Год назад

    Hi, im making it exacly like you, and it just cuts all the elements beside the screen as soon as I set overflow for hidden. Any advice?

  • @u1sart
    @u1sart Год назад

    Even though I am using logos When you copy the first content holder and paste it. That layer is formed over it.is there a reason for that

  • @christyrappold2256
    @christyrappold2256 3 года назад

    how do you scroll sideways? mine isn't showing that at the bottom / top of a page?

  • @walterbaeyens9813
    @walterbaeyens9813 3 года назад

    when i preview and publish it i keep getting a white background blok I only want the text in white as I have a black background any way to get that white blok away or in other words what am I doing wrong ? Thank you for you're time

  • @LisaJansen-yw6mu
    @LisaJansen-yw6mu Год назад

    I implemented this and I get a slight hiccup when the animation first loads. Any idea what is causing this? Apparently others have posted this hiccup in the forum but no response.

  • @garethellison01
    @garethellison01 3 года назад

    I know this vid is a year old(to the day), but anyone know how you would add an interaction or code to stop the scroll? I've tried everything. I'm using it to display a menu, and user simply clicks on the option as it scrolls past. I was hoping to stop the scrolling until the user clicked again. Any idea?

  • @maylee7140
    @maylee7140 3 года назад

    Thanks so much! How do I change the direction of the text to the other side as well?

    • @AlVision
      @AlVision  3 года назад +1

      In the interaction settings, instead of moving negatively on the X axis, you adjust it positively (i.e. +2000px instead of -2000px)

    • @mohdsameer8899
      @mohdsameer8899 3 года назад

      @@AlVision hello i liked all your content but i wqnt to tell that please increase your sound volume because it is so low please increase in future because i have set my volume full and then i can hear it right and you're doing amazing thanks

  • @Dochotshot
    @Dochotshot 3 года назад +1

    hi, thanks for the great tutorial.
    one question: i keep experiencing a little skip at the end of the loop.
    no matter what i do, or how i rezise and replace it, its never perfectly smooth.
    any help?

    • @Dochotshot
      @Dochotshot 3 года назад

      @Owen Rowbotham unfortunenately not :(

  • @derartas
    @derartas 3 года назад

    cant find your webflow project under the link
    :(

  • @shaunogilvy8219
    @shaunogilvy8219 3 года назад

    I'm having issues with non-english characters (ようこそ) etc. not displaying correctly. Any ideas for how to fix this?

    • @AlVision
      @AlVision  3 года назад

      Is your font compatible with such characters?

  • @Remjbbx
    @Remjbbx 4 года назад

    Does it work with the trigger on mouse hover ?

    • @AlVision
      @AlVision  4 года назад

      Yes, if you want it works on mouse hover. You'd typically do that to have a specific cursor when it hovers a specific element. If you go to al.vision and hover in on the case studies, you'll see a custom cursor that is activated on mouse hover.

    • @Remjbbx
      @Remjbbx 4 года назад

      @@AlVision I can't seem to be able to loop my image for a Infinite time, I only can do it while page is loading

    • @AlVision
      @AlVision  4 года назад

      @@Remjbbx Can you share a read only link? I'll take a look and see how to fix it.

  • @seleldjdfmn221
    @seleldjdfmn221 4 года назад

    Great video. whats Your favourite Song? Sending my support :D

  • @Bars_Sl
    @Bars_Sl 2 года назад

    It's better to translate by 100% each content-holder.

  • @hamodi20091
    @hamodi20091 Год назад

    using pixels for the loop is very bad, isn't?

  • @aloha2713
    @aloha2713 2 года назад +1

    Useless, if you resice the site the speed and text timing changes

  • @adi5877
    @adi5877 9 месяцев назад

    your audio is very low