Thanks so much for the info! I really appreciate how easy you made the process to understand and follow. I actually got it done successfully-unlike so many other videos out there!
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.
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 :)
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.
Thank you @Derek, I really appreciate your help. I'm trying to add the "Luminosity" effect to my logos - turn them from gray to color when users hover over them on the marquee loop. Do you have any suggestions on how to do so? Thanks!
@KellEgbertDesign Thanks for the comment Kell. There are many ways to achieve this. The best perhaps is the upload the logo in color (adding a class of course) then apply a filter (Brightness - bring it down & maybe greyscale) to the class. Then apply a hover effect. Let me know! This is a good suggestion I may do a tutorial on this.
@blwzonel I will be revisting this tutorial in the future. But for now it seems like there is horizontal scroll on your page? If so you need to set a width on the parent wrapper (of the logos) and set overflow to hidden.
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!
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 :)
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
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!
Hi! In my case, on smaller devices when the animation comes to the looping moment, I experience some kind of "refresh" that lasts just for a fraction of a second, but it's really noticeable. I have a longer wrapper with 11 logos, repeated a couple of times. Do you know if it's just webflow's way of dealing with this? Or maybe I am missing something?
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 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!
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!
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.
If you are talking about a horizontal scroll bar on your website. Then that is easy, it just means something is going outside of the screen (body). So you can just make a page wrapper div set width to 100% set overflow to none (which clips everything.
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.
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)
@@LouisaSilberg 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)
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
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
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!
Thanks so much for the info! I really appreciate how easy you made the process to understand and follow. I actually got it done successfully-unlike so many other videos out there!
Awesome! You got it working na :)
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.
Good job, legit tutorial
Thanks, I am legit person and not AI.
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 :)
You just saved my life Derek. God bless you.
Glad your life was saved haha!
God bless you! I've been looking for this, the over videos I've seen just rushed over the responsiveness...thanks man
You're very welcome! God bless and Praise God.
Thanks man! your explanation is so easy to understand and followed
Glad to hear it!
I've watched other videos and they weren't as thorough as this one. thank you!!
Glad it was helpful and thorough :)
I love you SO much for this. I was looking for this EXACT tutorial, my friend!
Glad I could help!
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.
mate, you are an absolute legend. Thank you very much!
You're welcome!
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.
Amazing tutorial😀
@@minayunan3002 Thank you :P
Thanks man, legend 🙏
Bro your a ledgend!!! Thank you for making this simple
No problem glad you found it simple bro 👍
Thank you man! It was so easy with your tutorila!
You're welcome!
Thank you @Derek, I really appreciate your help. I'm trying to add the "Luminosity" effect to my logos - turn them from gray to color when users hover over them on the marquee loop. Do you have any suggestions on how to do so? Thanks!
@KellEgbertDesign Thanks for the comment Kell. There are many ways to achieve this.
The best perhaps is the upload the logo in color (adding a class of course) then apply a filter (Brightness - bring it down & maybe greyscale) to the class.
Then apply a hover effect. Let me know! This is a good suggestion I may do a tutorial on this.
thanks, this works perfectly
Great to hear!
hey. thanks for your tutorials. this marquee swipes along with my canvas on the published panel, how do i go about to make it static on webflow?
@blwzonel I will be revisting this tutorial in the future. But for now it seems like there is horizontal scroll on your page?
If so you need to set a width on the parent wrapper (of the logos) and set overflow to hidden.
Goated tutorial
Thankss haha
Thank you it's really helped
Glad to hear that!
thank you so much I was able to do it!
You're welcome! - Glad to hear you were able to do it :)
great video. extremely helpful.
Glad it was extrmeely helpful!
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!
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 👌
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!
What if the pictures/logos wont fit on one screen, how do I have to adjust it so I dont get this wierd rollback in the animation?
Perhaps, you need to adjust the grid accordingly and perhaps for each picture / logo set an appropriate width and height.
Hi! In my case, on smaller devices when the animation comes to the looping moment, I experience some kind of "refresh" that lasts just for a fraction of a second, but it's really noticeable. I have a longer wrapper with 11 logos, repeated a couple of times. Do you know if it's just webflow's way of dealing with this? Or maybe I am missing something?
Something should be "missing" perhaps a small 0.5sec transition delay or the loop is not perfect.
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!
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/
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
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.
How i remove that scrow line bellow site when i made this loop?
If you are talking about a horizontal scroll bar on your website. Then that is easy, it just means something is going outside of the screen (body). So you can just make a page wrapper div set width to 100% set overflow to none (which clips everything.
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.
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)
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
AWESOME!
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?
@@LouisaSilberg 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)
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
GOAT
Hahaha
Easy CSS / HTML thing making more complicated in webflow 🤔
Hahaha - Just a different interface and way of code (visually) same premise really.
your tutorial does not work
Sorry to hear that, this was a very specific technique (ONE way of doing it) I plan to revisit this in the future.
It does work
:O
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