Red
Yellow
Purple
Watch the video and follow these steps to recreate this animation and display your colorful text content in a smooth, continuous scrolling effect.
Customize the design to your liking!
You can add as many Text modules as you want, just replace the CSS Classes shown in the video and in the CSS code (red, yellow, purple,…) with other names you like!
Define the Animation Speed for each Text module by changing the value in seconds for each CSS Class in the code (4s, 11s, 8s,…)
Leave the module with the largest Text in its default Relative position and set the smaller Text modules to Absolute position. This way, the row containing the animation will use the largest text module to set its minimum height.
Optionally, you can limit the Animation’s width to the Row’s size. Just set Overflow Hidden on the Row, as shown in the video.
Paste this into Text module → Advanced → Main Element:
white-space: nowrap;
This prevent each Text from breaking into a new line, add it in each Text module.
Paste this into Text module → Advanced → CSS Class:
red
Assign CSS Classes to each Text module and use those names in the CSS code.
Paste this into Page Settings → Advanced → Custom CSS:
@keyframes marquee {
0% {left: 100%;}
100% {left:-100%;}
}
.red {
animation: marquee 4s linear infinite;
}
.yellow {
animation: marquee 11s linear infinite;
}
.purple {
animation: marquee 8s linear infinite;
}
Customize the animation speed by adjusting the value of 4s, 11s, 8s… to your liking. That’s the time it takes for each text to move across the container.
🥳 That’s it!
Boost your creativity!
Want to create all kinds of Navigation Menus even more easily?
