Scrolling text

[gurjitbasi]

Hello, does anyone know how I can have continuous horizontal scrolling text from the right of the page to the left?

For example, like the text at the top of this page: https://publicofficial.co

[Misha]

Hi

1. You need to type this text multiple times in a row (Use Cmd+/- for more convenience)
2. Enable On Load animation → Choose Move option → And move text left or right to make it cover the same phrase (Use Shift while dragging to move text only horizontally)
3. Enable Loop = Cycle option

[dennerk]

Hey @Misha another readymag user here. I found your explantion super helpful, however I am experiencing one issue. I took your advice about typing the text multiple time in a row, but eventually, the text runs out- I would imagine I would have to repeat like 100 plus time for it not to cut off. Is there anyway around this?

[HEADLESS.HORSE]

Hi @dennerk it sounds like in this instance a code injection element might be the better option. I’ve linked the code from this thread [marquee](How do you create marquee text?)

<div class="marquee">
  <div>
    <span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 1.</a></span>
    <span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 2.</a></span>
  </div>
</div>

<style>
  body {
    margin: 20px;
  }

  .marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 25px;
  }

  .marquee div {

    position: absolute;
    display: block;
    overflow: hidden;
    width: 200%;
    height: 30px;
    animation: marquee 10s linear infinite;
  }

  .marquee span {
    float: left;
    width: 50%;
  }

  @keyframes marquee {
    0% {
      left: 0;
    }

    100% {
      left: -100%;
    }
  }
</style>

[AJ_KM]

Hey, I am new to coding, but would love to transform text to a different style on this animation. Is there any way to do this? Changing Font, font style, font size and so on?
Thanks!

[Johnny_N]

One solution would be to insert a scrolling text GIF image made with this online tool.

[Readymag]

Hi! You can use our preset: click Widgets - Presets - Animated widgets - Infinite running line. Then customize the text as you’d like using text settings that will pop up in the panel on the right

[awildjeff]

Having the same issue as @dennerk here, but I’m trying to do it with images. How do we do this? I’ve tried to copy the animation details from “Infinite Running Line” preset, but it doesn’t work. The marquee starts out slow, gradually finds a consistent pace, then when it gets to the end it slows down, completely exits the page, then starts over on the other side of the page instead of linking up into one continuous looping marquee. How do we make it continuous using your infinite running line preset?

[awildjeff]

Okay, I actually figured it out! Well, readymag’s youtube ended up being pretty helpful actually. I watched this video and realized that when I applied the ‘Load’ > ‘Move’ animation specs from “Infinite Running Line”, your original text (or sequence of images in my case, all grouped together) becomes translucent, and then you get this solid fill duplicate of the original, as with any ‘Move’ animation. If your repeating text was “I can’t wait to go to the beach”, then you’d want to move the second or third “I can’t wait to go to the beach” in your solid fill text box so your solid fill overlay lines up perfectly with the beginning of the translucent text. I hope that makes sense. You better just watch the video haha.

But then to address the reason as to why mine was starting out slow and then gradually stopping instead of looping continuously, it was honestly so dumb haha. Right between ‘Delay’ / ‘Duration’ and the ‘Move’ button, is where you can adjust whether your animation fades in/out, is linear/consistent, etc., and mine was set to ‘ease in and out.’ Derp. Go figure, when I clicked ‘linear’ it suddenly became smooth and consistent and remained continuous.

Anyway, hope that helps someone!