top of page

Creating infinite scrolling text with Velo

Follow Product Manager Jonathan’s step-by-step tutorial to learn how to add custom code to create an infinite horizontal scrolling text animation. In this example we’re creating this animation with text, but it can work for any type of element.

What do you think about the course so far?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

Jonathan Tsodikovitch

Product Manager

I’m a Product Manager for Editor X. I have a Bachelor’s Degree in Instructional Technology from HIT. During my free time, I enjoy hiking, camping, and snowboarding. I live by the motto “coffee on workdays, tea on weekends."

How to use Velo to create an infinite auto scroll

Part 1: Set up your text

1.Add a blank section where you want the scrolling text to appear on the page.

2. Drag a Container into the section from the Add panel.

3. Dock it to the left hand side and set the margins to 0.

4. Set the container width to 100%.

5. Set the minimum height of the section to None. Now the container height determines the height of the section.

6. Add the text that you would like to animate so it is the full width of the container. Make a note of its width in pixels (you will need this in a few steps).

7. Apply a grid to your container of several columns and 1 row. In this case, we’re using a 3x1 Grid.

8. Select the text, and in the Inspector panel under Grid Area, set the Column Start to 1 and Column End to 2. This means the text will fill only the first column of the grid.

Note: You might see that changing the Grid Area affects the text layout. We’ll use the width of the text element to adjust the container size in the next step.

9. Remember the width of the text you made a note of in step 6? Multiply that by the number of grid columns you have. In this example, I multiplied by 3 and got 5,000 pixels. Set the width of your container to that number of pixels.

10. Set the text in the first grid column to 100% width. Dock it to the left with no margins.

11. Now duplicate your text.

12. In the Inspector panel, set the Grid Area for the duplicated text to Column Start 2 and Column End 3 to position it in the second grid column.

13. Again, dock it to the left with no margins and set the text to 100% width.14. Duplicate the text as many times as you need and position it in each grid column using Grid Area.

15. Remember to dock to the left with all margins at zero, and set the text width to 100%.

16. Select your container and click Adjust Grid.

17. Change each grid column width from 1fr to max-content so each column adjusts according to the text inside.Finally, select the section and in the Inspector panel set the Overflow content to Hide so it won’t be visible on the live site.

Part 2: Adjust the text at each breakpoint

18. Go to the tablet breakpoint. Adjust the container height if needed.

19. Check your text width in pixels again, and multiply by the number of grid columns.

20. Set your container width to that number. In this example, I set it to 4050 pixels.

21. Repeat steps 19 to 21 on the mobile breakpoint.

Now your text should be in place to create the scrolling animation.

Part 3: Add the infinite side scroll animation using Velo

22. Turn on Dev Mode.

23. Copy and paste the following code snippet:

import wixAnimations from "wix-animations";

import wixWindow from "wix-window";

const runningTxt = wixAnimations.timeline({ repeat: -1 });

$w.onReady(function () {


  function playRunningTxt() {

    let sliderWidth;



      .then((windowSizeInfo) => {

        let windowWidth = windowSizeInfo.window.width;

        if (windowWidth > 1000) {

          sliderWidth = 5000 / 3; //Desktop

        } else if (windowWidth >= 751) {

          sliderWidth = 4050 / 3; // Tablet

        } else if (windowWidth <= 750) {

          sliderWidth = 3350 / 3; // Mobile



          .add($w("#runningTxt"), {

            x: -sliderWidth,

            duration: 10000,

            easing: "easeLinear"




    $w("#txtSection").onViewportEnter(() => {;


    $w("#txtSection").onViewportLeave(() => {

24. Beside sliderWidth = make sure to enter the corresponding pixel size of your container for each breakpoint. 

25. Change the item IDs in the code above for your container item ID.

26. Adjust the duration to make the text scroll faster or slower.

Extra step if you have additional breakpoints: If you have additional breakpoints, copy the code snippet from if (windowWidth to 3; and paste again. Adjust the windowWidth number to the max size of the breakpoint.



How to add code to Editor X sites with Velo


Going deeper into Velo


Multi-state box

bottom of page