WebDev For You - Daily Interaction #101

Welcome to daily interaction #101! This demo showcases an infinite logo carousel on page load. There are two rows of logo placeholders that both move at different speeds. You can replace the logo text with an image, and change all the colors to match your brand. For this I used Flexbox to create equal distance block widths, and then for the more square blocks I give it a specific width and height of 100 by 100. For smaller devices the blocks are all the same size. The effect was achieved by having two rows next to each other and once one row goes out of view it starts at the beginning to create the infinite loop effect. *The only caveat with this interaction is that if you navigate away from the page the animation does not loop and the timing starts to get altered for the logos. The WebDev For You Slack Channel is also open so be sure to subscribe if you have any questions or want to know more about each interaction! https://www.webdevforyou.com/