GSAP - Infinite Textbanner

Aus Wikizone
Version vom 16. April 2021, 07:51 Uhr von 84.157.23.138 (Diskussion) (Die Seite wurde neu angelegt: „ https://codepen.io/kholja/pen/JjEZBeN?editors=1111 <syntaxhighlight lang="javascript"> // Add Clone at the End // Scale text to at least 100% (container overf…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche
https://codepen.io/kholja/pen/JjEZBeN?editors=1111
// 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();