Infinite text loop without interruption

Ask the community
,
1

Hello I would like to create an endless text block where there is no interruption in the text. Right now my text just reaches over the screen. In the animation I created, the text goes completely across the screen before it repeats, meaning I have a gap in text. How can I avoid this? That no interruption of the text takes place.

import { timeline } from 'wix-animations';
import wixWindow from 'wix-window';

function getWindowSize() {
 return wixWindow.getBoundingRect ()
 .then ((windowSize) => {
 return windowSize.window;
 });
}

$w.onReady(function () {
 // Scroll text
 let scrollRtL = $w('#text');
 // Timelines
 let scrollingTextRtL = timeline({ repeat: -1 });

 getWindowSize ()
 .then ((windowSize) => {
  scrollingTextRtL
  .add(scrollRtL, {
   x: -windowSize.width, 
   duration: 10000, 
   easing: 'easeLinear' 
  });
 scrollingTextRtL.play();
 });

});

This is how it looks at the moment.

2878×126 8.36 KB

And this is how it should be looped.

2746×120 12.2 KB

I would be happy if you have any tips for me!

2 Likes
2

I’m not sure I understand what you’re trying to do.
Is it something like this:
https://cdpn.io/jonathan/fullembedgrid/RwJdLX?animations=run

Or:
https://codepen.io/anon/embed/powVeMO?height=450&theme-id=dark&default-tab=css%2Cresult&user=&slug-hash=powVeMO

Or something else?

3

The first link is correct. This is what I want my final result to look like.
Do you know how I can implement this on wix?

4

I guess you can do it with wix-animations, but I almost never worked with this module, so I can’t advise (maybe someone else).

Another way is to create a custom element and use some css/html code inside. Something like this for example:

5

Hey Karina, did you got the answer?