Smooth Scroll

General
, ,
1

I am working for horizontal news ticker which should be smooth for any amount of lines. I wrote a script to scroll originally only one line, then add next line when it is about to enter in visible area. After adding 4th line, remove the content of 1st line. And after adding 5th line remove the content from 2nd line. And so on. So at any point of time scroll will be having content only in 4 lines.
I am sharing the files. Please have a look and share your comments.
https://drive.google.com/drive/folders/1M7OvrDYylH9kO_LXivzN2WG5LESwep-B?usp=sharing

1 Like
2

Hi! It works smoothly only if there are at least 4 lines with total length at least 1920px.
So that’s not enough for the ticker to be smooth for any amount of lines.
And there’s another problem - it displays correctly only on 1920x1080px. If Capsar output is different, it won’t be displayed as it should. I’d recommend to set sizes in vw, so that the elements are the same size and position regardless of the screen size.

1 Like
3

Thank you for your feedback and suggestions.

  1. I agree, for less than four lines scroll not working properly. Trying to correct.
  2. Also trying to generalise the code for all video mode.

For now I have added PAL, 1280x720, 1920x1080 templates.

4

My tip for this is to animate each chunk of text on its own timeline. you can then use the oncomplete method to remove it once it’s off air. i load messages from the update function. it is limited to 1920x1080 and only works in 1 direction but that meets my needs. Hopefully a few pointers in the following js

// css
.tickerContent {
    position: absolute;
    left: 1921px;
    padding-left: 18px;
    padding-right: 18px;
}

// js
_onAir = false;
_counter = 1;
const _speed = 150;
const _screen = 1920;
let messages = [];

function start(){
	_onAir = true;
    next();
}

function stop(){
	_onAir = false;
}

function next(){
    // let it run to end if not on air
    if(!_onAir)
        return;
    _counter++;

    let nextDiv = document.createElement("div");
    let nextMsg = messages.shift();
    messages.push(nextMsg);
    nextDiv.id = 'tc' + _counter;
    nextDiv.className = "tickerContent";
    nextDiv.innerHTML = nextMsg;

    document.getElementById('ticker').appendChild(nextDiv);
    let msgWidth = nextDiv.offsetWidth;
    let timeline = gsap.timeline({paused:true});
    timeline.to("#" + nextDiv.id, {duration: getDuration(msgWidth), x: -1920 - msgWidth, ease: "none"});
    timeline.play();
    timeline.eventCallback("onComplete", offScreen, [nextDiv.id]);
    timeline.call(next, [], getNextMsgTime(msgWidth));

}

function getDuration(width){
    let size = _screen + width;
    return size / _speed;
}

function getNextMsgTime(width){
    return (width + 50) / _speed;
}

function offScreen(id)
{
    // console.log('Removing div ' + id);
    let ticker = document.getElementById('ticker');
    let tickerMsg = document.getElementById(id);
    ticker.removeChild(tickerMsg);
}
1 Like
5

@nickb
This is excellent code and idea. I remember this idea when @hummelstrand at the old forum tell this. News Crawler/Ticker - CasparCG · Forum

  1. Now even one line of scroll works.
  2. Circuler scrolling . No end of scroll. First line just behind last line.

I have updated my code above.

6

Is it possible for you to share complete template, please?