Bearbeiten von „GSAP - Infinite Textbanner“

 https://codepen.io/kholja/pen/JjEZBeN?editors=1111
<syntaxhighlight lang="javascript">
// Add Clone at the End
// Scale text to at least 100% (container overflows and nowrap)
// Move 100% text-width to the left

$(window).resize(resizeHandler);
gsap.registerPlugin('ScrollTrigger');
gsap.defaultEase = "power4.Out";
var time = 12;

// Set text animation
function rollOne(){
  // 
  var tlOne = gsap.timeline();
  var $textOne = $(".text-one");
  $textOne.css({width:"auto"});
  var textWidth = $textOne.width();
  console.log(textWidth);
  $textOne.width(textWidth);
  
  tlOne.to('.text-one',time,{
    x:-textWidth,
    ease: Linear.easeNone,
    repeat: -1
  });
  return tlOne;
}

// Create a clone and roll it
function cloneOne(){
  $clone = $(".text-one").clone().appendTo(".banner-one");
  $clone.addClass("clone");
  rollOne();
}

function resizeHandler(){
var progress = tlOne.progress(); //record timeline progress
  tlOne.time(0).kill(); //rewind and kill the original tween.
  //time = 5;
  rollOne().progress(progress); //create a new tween based on the new size, and jump to the same progress value.  
}

cloneOne();
GSDevTools.create();

</syntaxhighlight>