E-W Posted February 28, 2023 Share Posted February 28, 2023 I have an infinitely scrolling section and initially, it worked but then it stopped infinitely scrolling. It ends and then restarts with blank space in between. Any ideas why? Site: https://collie-sawfish-km3y.squarespace.com/ PW: brineintopedro This is the code I'm using: section[data-section-id="63fe34c80e256a7c9b9e09a2"]{ * { box-sizing: border-box; } body { margin: 0; } .marquee { /* overflow: hidden; */ } .marquee-content { display: flex; animation: scrolling 10s linear infinite; } .marquee-item { flex: 0 0 16vw; margin: 0 0vw; /* flex: 0 0 20vw; */ /* margin: 0 2vw; */ } .marquee-item img { display: block; width: 100%; /* padding: 0 0px; */ } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translatex(-144vw); } } } Link to comment
Solution E-W Posted March 1, 2023 Author Solution Share Posted March 1, 2023 (edited) SOLVED: Found this helpful article on modern and responsive marquees with a bit of history and some warnings about their use: https://ryanmulligan.dev/blog/css-marquee/ I simply copied and pasted the content into the div again to create the allusion of is looping. Edited March 1, 2023 by E-W Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment