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…“)
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();