HTML crawling text

General
1

Hey there, I would like to ask if anybody have managed to create smooth HTML crawling text template for 50i environment? I’ve tried many options with still no luck. Maybe somebody can share experience or just share how to achieve this thing? Thanks.

2

Smooth crawls have always been a bit tricky in Caspar. The newer versions brought back the image scroller. That is much smoother than any HTML (or Flash) crawlers I saw.

If it needs to be HTML, try with GreenSock animator.

3

I made it in HTML with a “div” stationary as a container with overflow hidden

then another “div” inside it with the actual text and moving the whole div left-right with simple javascript animation

For me the tricky part was to precise measure the legth of the text to calibrate the out animation, as the text could be updated at the last time

4

Yes, I’ve tried greensock a long time ago, that time it wasn’t so good, maybe now they improved. I saw that image scroller is back, but problem afaik it can only go one way, bottom to top or no? Because I need bottom to top and right to left options.

5

Could you share a code snippet to see? Also what from many years of experience and searching for best solution I have found this one: GitHub - tjenkinson/dynamic-marquee: A small library for creating marquees., but it’s not always so smooth because of how CasparCG CEF works. Also there is something from version 2.4.0 and up, that when crawler reaches it’s end it freezes for a some time and then continues to scroll.

6

See here for explanation. The scroller needs an image that has the size of the channel in one direction and is larger in the other. So to scroll horizontally use a width of 1920px, to scroll horizontally use a height of 1080px. If the speed is negative you scroll in the other direction.

7

I usually manage everything in a separate javascipt file instead of html directly,
for me is more handy this way

first create the div container

let RollingText_Container = document.createElement("div");
RollingText_Container.className = "rollingtext_container";
document.body.appendChild(RollingText_Container);

in css properties you need to add:

overflow: hidden;

(as well as position and dimentions (left, top, width and height))
so it works as a mask and you see the text only inside the area of the div

then add the second div with the actual text

let RollingText = document.createElement("div");
RollingText.className = "rollingtext";
RollingText.innerHTML = "demo text to be scrolled";
RollingText_Container.appendChild(RollingText);

and finally the animation

RollingText.animate([
    {left: "46vh"},
    {left: "-46vh"},
],{
    duration: 10000,
    delay: 0,
    easing: "ease-out",
    fill: "forwards"
});

I have prepared a very simple demo but but unfortunately I can’t upload a .zip file here

8

i’m using requestanimationframe for news ticker horizontal scroll on the 50i channel and it is smooth.

9

I have embedded everything in the html so it can be uploaded

so here the very simple demo

Scrolling_Text.html (227 Bytes)

1 Like
10

I totally forgot about this manual! Thanks Didi, I will give a try.

11

Which version of caspar are you using?

12

CasparCG Server 2.4.1 for windows.

13

Strange, I could not achieve good result using requestanimationfram. But I created simple app with AI for generating still images for dummies, when i will finish it i will share here :wink:

14

what is your setup ? i’m using with enable-gpu: false

<html>

    <enable-gpu>false</enable-gpu>

</html>