Marquee Texts from right to left duration and speed problem

[ReaganWP]

Hi, I am still learning gsap and I just want to ask how to adjust the speed and perfect duration depending on the screen size / viewport of a user. The current one I have is working, but I am having a trouble with the speed and the duration to reach the left end (please check attached video).

I tried to follow and understand @mikel codes from this thread.   \  but it doesn't work for me.  What would be the best way to adjust the speed and the duration time that all the text will reach to the end left.

Thank you so much in advance!

Here's the video link

<div class="wrapperRollingText">
  <div class="rollingText text">
    <div class="free-shipping">FREE SHIPPING ALWAYS</div>
    <div class="thc-free">  THC FREE </div>  
    <div class="satisfaction"> SATISFACTION GUARANTEED </div>
    <div class="lab-tested">  LAB TESTED </div>
  </div>
</div>

 

var rollingTween = new TimelineMax();
var time = 5;
var $rollingTextgoLeft = $(".rollingText");
var $text = $(".text");

function startRolling() {
  $text.css({ width: "100%" });
  $text.width(width);
  var width = $text.width();

  rollingTween.to(".rollingText", time, {
    x: -width,
    ease: Linear.easeNone,
    repeat: -1
  });

  return rollingTween;
}

function resizeCheck() {
  var progress = rollingTween.progress(); //record the progress so that we can match it with the new tween (jump to the same spot)
  rollingTween.time(0).kill(); //rewind and kill the original tween.
  //time = 5;

  startRolling().progress(progress); //create a new tween based on the new size, and jump to the same progress value.
}

resizeCheck();
$(window).resize(resizeCheck);

 

[ZachSaucier]

Hey Reagan. I noticed you're using the old syntax for GSAP. We highly recommend upgrading to GSAP 3 which has a smaller file size, a sleeker API, and a bunch of new features. Upgrading is easy!

 

As for your question, if you'd like our help debugging please create a minimal demo for us to look at and clearly explain what's going wrong with it.

 

Happy tweening!