Making a CSS Only Infinite Text Marquee

The CSS marquee element brings me good memories to the good old days of the internet. So seeing this element being added to many new websites lately, makes me really excited. In today's video I want to show you the modern approach to make a dynamic width (text) marquee with CSS only.

In next week's video we will be taking it even further, where we will be creating a fixed width logo slider, where there isn't any repetition in the logo's at all! Yet the marquee repeats seamlessly.

LINKS:

MORE?

MY SOCIALS

COLLAB

WHO AM I?
If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend.

TIMESTAMPS:
00:00 – Intro
01:10 – Code starting point
01:28 – Add some basic styling for the texts and put them on a single line
03:08 – Add keyframe animation to move text
03:38 – How to make the animation loop
04:50 – Making wrapper as wide as the text
05:19 – Why flexbox gap prevents us from looping infinitely
06:00 – translateX of -50% is exactly the same as the starting point
06:46 – Making the marquee loop by animating to -50% instead of -100%
07:40 – Fixing the accessibility problem of duplicated content
08:30 – Adding a nice fadeout around the edges
10:00 – Make the marquee able to move in both directions
11:49 – Make speed configurable too
12:10 – Rotating the marquees for extra fancyness
12:48 – Final result and outro
#css #webdevelopment #frontend

[gadoosher]

God.. I'm trying to wrestle with Framer Motion to make this and this is SO much easier 😭 What a wake up call to not always reach for a library.

[JustforTask-mw]

can you just tell me which font you are using in the vs code please. I am loving this font, and wanna use it

[MrQuentinH]

06:11 "Nothing happen" Is that u the video "if u poor water on the rock NOTHING HAPPEN" ? :O

[BrianNorrisDesign]

This is awesome, but it does blink when the loop starts again in Safari 17, and sometimes in iOS. I've tried everything to get that to stop. Has anyone else noticed this?

[MB-uumu]

Way too complex! I'm using mediwiki, and cannot use a separate .css file, everything must be done inline. Also have no clue how to use flexbox. Can you please bridge the gap and do a simplified version of the HTML <marquee> without flexbox and external .css? Simple want a box at the top of the screen with blue borders that wraps the entire width of the screen and scrolls 1-2 sentences infinitely. Thank you!