Creating infinite scrolling text with Velo

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 () {

  playRunningTxt();

  function playRunningTxt() {

    let sliderWidth;

    wixWindow

      .getBoundingRect()

      .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

        }

        runningTxt

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

            x: -sliderWidth,

            duration: 10000,

            easing: "easeLinear"

          })

          .play();

      });

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

      runningTxt.play();

    });

    $w("#txtSection").onViewportLeave(() => {
      runningTxt.pause();
    });
  }
});

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.