Jonathan Tsodikovitch profile image

Jonathan Tsodikovitch

Product Manager

,

Dec 14, 2021

Infinite auto scroll.

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.

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

      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.

How to use Velo to create an infinite auto scroll.
Part 1: Set up your text.
Part 2: Adjust the text at each breakpoint.
Part 3: Add the infinite side scroll animation using Velo.
Jonathan Tsodikovitch profile image

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."

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶