Marquee analogue, text running in opposite directions, CSS/SCSS

Marquee is coming back in to trend again, it is a well forgotten effect.

Previously running text effect was achieved with <marquee>. This element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Reference: MDN web docs

Suggested option.

There are quite a few ways to achieve this. I will be only focusing on pure CSS solution, it is a bit more performance demanding, we will be adding in ‘will-change: transform;‘ to address this issue.

There are quite a few CSS options available: ‘text-indent‘, ‘left‘, ‘transform‘ … I will be using ‘transform’ to achieve this as it works best for desired effect.

See the Pen marquee analogue, text running in opposite directions by Danila (@danilaboratory) on CodePen.

If you need additional effects on hover, where one of the lines slows down without jumping to the start use: ‘text-indent ‘