Streaming live at 10am (PST)

Create scrolling text on loop with Interactions?

hi,

i’m making a website that is supposed to have a scrolling text on loop on the homepage.

with that said, i’m having trouble creating an interaction for it to work.

can someone help me? :disappointed_relieved:

Here is the result i’m expecting [near “sqirl, away, specials”]: https://sqirlla.com/

Here is my site Read-Only: https://preview.webflow.com/preview/isabelas-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=isabelas-marvelous-project&preview=11d2567dc1793f532f92612b066d3d29&mode=preview

thank you!
isabela

Hi @isabelavdd

  1. So you make a container div that will be the parent div of your text that you use in your animation, and set overflow to hidden.
  2. Make the div with your text and place it in the container.
  3. Set up your IX2 so that the initial state of the text div is outside of the container, and then setup your animation… something like this:

13%20PM

dont forget to hide/unhide your text when you put it back into the original position at the end of the scroll

then you set your animation to loop like this:

03%20PM

and voila your text loops infinitely!

hi ivg! thank you for your help :slight_smile:

i forgot to say that i’m very new at webflow haha. this is my first time doing an interaction.

i tried what you told me, but i’m having 2 issues right now:

1 - i can’t seem to make the text scroll in a single line, it moves only inside the full block;

2 - can you show me the specific numbers you used at the animation steps?

here’s the ready only link again so you can see what i tried to do :joy: https://preview.webflow.com/preview/isabelas-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=isabelas-marvelous-project&preview=11d2567dc1793f532f92612b066d3d29&mode=preview

thank you very much,
isabela

@isabelavdd

No problem, here is what you do.

  1. You should adjust Div Block 19 to be 100VW wide
  2. You should adjust Text Block 5 to be 117% wide (or however long so that the text remains in one line - keep increasing the width until the text fits into one line)
  3. Open up your animation interaction and do the following:

Make sure to get all the units correctly - I use VW for movements and you can increase/decrease the time of the move to speed up / slow down the scroll… (look at the full size screen shots to see the values I used at the bottom of the screen)

Once you are done with those steps you should be good to go

oh yes i got it! :)))

thank you very much!