Infinite Logo Marquee Scroll Effect in Webflow | Tutorial
Vložit
- čas přidán 2. 08. 2024
- Learn how to captivate your website visitors with a stunning logo marquee scroll effect in Webflow! Watch as I guide you step-by-step through the process of creating an eye-catching, professional logo scroll animation. Elevate your web design skills and engage your audience with this easy-to-follow Webflow tutorial. Start impressing viewers today!
📚 Time Stamps:
Intro:
00:00
Example sites:
00:07
Webflow Walkthrough:
00:55
Best practices for exporting logo files:
1:10
Back to Webflow Walkthrough:
2:12
Mobile Responsiveness:
7:50
Closing Remarks:
10:40
👍 If you found this tutorial helpful, don't forget to give it a thumbs up and subscribe to the channel for more web design and development tutorials, and click the notification bell so you never miss an update.
📢 Connect With Me
- Website: www.dereksiu.com.au/
- Fiverr: www.fiverr.com/dereksiu
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
The main difference between this and other videos is that you explain the concepts as you explain the objective. It was really helpful! Suscribed.
Thanks for subscribing Francis!
Was just looking for this the other day omg. Thank you for these tutorials, absolute legend
No problem 👍 glad it helped. Just remember this is just ONE way of doing this. But I hope you can wrap your head around the concept that is all that matters in the end.
This is the first animation I've done in webflow! I love it thank you so much!
Wow - that's impressive for your first animation. Well done, hopefully by understanding the premise of this tutorial you can use it to build other animations :)
mate, you are an absolute legend. Thank you very much!
You're welcome!
I've watched other videos and they weren't as thorough as this one. thank you!!
Glad it was helpful and thorough :)
You just saved my life Derek. God bless you.
Glad your life was saved haha!
thank you so much I was able to do it!
You're welcome! - Glad to hear you were able to do it :)
Thank you so so much, other tutorial i found required custom code but yours is well explained, simple to understand and works really well!
You're welcome! - Glad you found it helpful and I hope you learnt the premise (reason why) rather than following a step by step tutorial.
Bro your a ledgend!!! Thank you for making this simple
No problem glad you found it simple bro 👍
thanks, this works perfectly
Great to hear!
Thank you it's really helped
Glad to hear that!
great video. extremely helpful.
Glad it was extrmeely helpful!
Goated tutorial
Thankss haha
Thank you for your response. Yes I know there are plugin. Elementor also have image carousel.
But I mostly use the elementor HTML widget to create things myself .
I was able to create html and css code that works perfectly as yours
ALL THANKS TO THIS VIDEO . I used as my guide
Thats AWESOME to hear, at the end of the day Webflow really is just CSS / HTML / JS - so it was cool you translated this into Wordpress based on my tutorial lol.
GOAT
Hahaha
Great tutorial! How would you go about the carousel looping the other way around? To have the logos instead of going to the right going to the left. Thanks!
Great suggestion! - It would be the same premise. Instead of moving it -100vw or -100% just do the opposite: 100vw or 100%. Hope that makes sense!
Thanks a lot derek ! I have a small problem the other grid is also appearing on the right side of the screen, how can i solve that ?
Make sure for the wrapper you set to 100% width (or whatever you want) then add overflow none (that will crop / mask everything )
Let me know how you go!
I'm struggling after minute 5. Instead of rotating to the end when I move the margin it adds to the spacing between the items or makes it smaller. Help!
The main goal of this tutorial (and all my tutorials) is to explain the "premise". In code there are many ways to do things. I would suggest to follow exactly step by step and understand what is happening, then explore other solutions.
But what you have described seems like the "items" don't have a set size, I would recommend using a GRID as it auto calculates the size. But again many ways to do things.
If you are still stuck you can share with me your read only link and I can take a look when I get the chance :D
Hey mate, fantastic slider. I tried to build it myself but I have a sroll bar at the bottom to scroll to the right side. Maybe I made a mistake somewhere? I use only logo grid instead of two because my grid is already longer than the page width. Therefore I thought no need to copy that. Maybe here is the mistake? A hint would be really appreciated because I did not find a solution so far.
Hey Peter - so a "bottom scroll" bar only appears when the width of the item is larger than the device screen as you hinted. You can wrap both the two grids into a DIV block (or the parent DIV like the section) and set that DIV block to have 100% width with overflow set to none.
Hope that helps if not just let me know :)
@@dereksiuau will try that tomorrow. I guess this is it. Thank you for the hint
I added two extra grid duplications for more logos. The first and last rows are the same, so the animation works great. However, now my screen scrolls over to the right all the way down the line of logos. Can you only do this with two grid duplications? I considered making the first grid hold all logo images and setting it to 300% then duplicating that grid row. Do you think that would work, or do you have an easier solution from where I am now?
Thank you for this! Very helpful!!
Hey - thanks for the comment, as long as. the maths adds up that should work!
So the main div that is wrapping everything should ideally be set to 100% width with overflow set to none (so there will be no horizontal scroll) then the grids you have should be 100% width with the parent div set to flex horizontal - no stretch or no wrap.
Then finally the animation will depend on the amount of grids you have.
Hope that makes sense - it's hard to troubleshoot your solution based on text. So if you are still struggling with anything just send me your read-only link and I will try my best to answer.
- Derek
@@dereksiuau you're my hero today thank you so much. works perfect
@@kmh0201 awesome 👌
Would that work if logos are pulled from a CMS?
Great point! That is a bit more tricker (extra step) but same concept / principle.
Calculate the logos and make them work in a logo marquee fashion. Sometimes you may not have enough logos to make a perfect loop, if that is the case you will need to repeat some logos.
Please tell me the names of apps or web services that have various logos.
If you are referring to website examples with a logo marquee section - a lot of them have it. For example Webflow itself:
webflow.com/
Why does my marquee flash at the end when it resets?
Perhaps it's the last interaction transition from the first. transition (loop period) maybe you set it to have a delay or duration? It should be instant (ie. 0sec)
LOVE THAT VIDEO BUT IF I HAVE MORE IMAGES HOW CAN I DO IT? BEACUSE I TRIED BUT IT SEEM LIKE I AM DOING IT WRONG PLEASE HELP
I understand your frustration. If you understand the concept / premise of what I explained in the video you just need to use basic maths to ensure it's a perfect loop.
So if you have more images you will need to ensure:
1/ It has perfectly repeated images on rotation
2/ The animation timing (move interaction) is set appropriately).
I would suggest to follow my tutorial again 1:1 to understand the concept then explore adding more logos and experimenting how to do that.
If you still struggle LMK!
i watched the video again and now my web works perfectly ! thanks so much
How to make it so its scroll from left to right?
You just reverse the interaction as seen in the tutorial. LMK how it goes.
@@dereksiuau Yes its worked, thanks
On desktop the horizontal scroll bar seems to be moving with the animation. The screen is OK and doesnt show any white space on the right, just the bottom scroll bar is contstantly moving. Any ideas?
There should be no horizontal scroll bar (unless that's the effect you want) i suspect you need to apply 100% width to the parent div with overflow hidden (clips everything) - this should remove the horizontal scroll.
Let me know how you go!
@@dereksiuau I have the same issue and I set the width to 100% and hid the overflow, but now I don't get the second grid. It just scrolls into abis
@@dereksiuau When I do that, in fact the horizontal bar disappears. However, the second grid doesn't show up on the animation. It keeps scrolling, but no logo appears. Do you have any idea why? Thank you!
can i replicate this on wordpress elementor page using the elementor HTML widget?
This tutorial was specifically for Webflow (and perhaps hand coding HTML / CSS / JS) if you are using WP and elementor, I'm sure there is a plugin that has this effect you can use.
what isnt it working for bigger sized images, i have about 12 images with a width of about 512 px
same i was hoping there'd be a solution for this because I have a lot of images
Fantastic Query! The tutorial was to show the main premise I can't really cover all the variants. In your case, you may have to use another size eg. instead of using a fixed 512px maybe use percentage or VW. Hope this helps.
As long as you understand the premise of the video you should hopefully be able to find a workaround yourself :D If not I will try my best to help just keep me updated :D
upload in 1080
Noted future videos recorded are now in 1080p.
I have a large blank space on the right side and I don't know how to make it unaffected when publishing
Send your read-only link and I can advise.
thanks for this great video!@@dereksiuau I have the same problem. Any solution here?
@@user-hp1vu4km3u It's probably the fact you need to set the parent container to have a width of 100% (width of the screen) and overflow to hidden (so it crops out the large blank space)
Easy CSS / HTML thing making more complicated in webflow 🤔
Hahaha - Just a different interface and way of code (visually) same premise really.