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 :)
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.
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.
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!
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 :)
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?
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
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!
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!
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.
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.
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
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!
