How to create scrolling text
ABOUT
Titles not standing out enough on your site when you scroll? Learn how to apply scrolling text effects on your Wix site.
SUITABLE FOR
Editor X
PROJECTS USED
Chapter 01: Layout
01. Add a text element and adjust the style
02. Set the width to "max-content"
03. Place the text in a container
04. Add a two-column grid
05. Duplicate the text and place it in the second column
06. Set the text's position
07. Add a space at the beginning of the text.
08. Set section overflow to "hide"
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Chapter 02: Velo
01. Turn on Dev Mode
02. Add an element ID - “scrollingTextContainer”
03. Import "wix-animation" and "wix-window"
04. Paste the animation function
05. Update your element IDs in the code
06. Change the animation duration to control the speed of the text
07. Pay attention to the jump
08. Get the width of the 2nd text in pixels
09. Paste the pixel width into the “animationValue” variable
10. Repeat the previous steps for breakpoints and update the code
import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';
$w.onReady(function () {
scrollingText();
});
//SCROLLING TEXT
function scrollingText() {
let animationValue;
wixWindow.getBoundingRect()
.then((windowSizeInfo) => {
let windowWidth = windowSizeInfo.window.width;
const timeline1 = wixAnimations.timeline({
"repeat": -1,
"yoyo": false
});
//Check if Desktop
if (windowWidth > 1000) {
animationValue = -2461;
//Check if Tablet
} else if (windowWidth <= 1000 && windowWidth > 750) {
animationValue = -1930;
//Check if Mobile
} else {
animationValue = -1500;
}
const scrolling_txt = $w("#scrollingTextContainer");
timeline1.add(scrolling_txt, {
"x": animationValue,
"duration": 10000,
"easing": "easeLinear"
});
timeline1.play();
});
}
