GSAP - Infinite Textbanner - Versionsgeschichte

109.192.169.230 am 22. April 2021 um 11:14 Uhr

2021-04-22T11:14:21Z

109.192.169.230 am 22. April 2021 um 11:13 Uhr

2021-04-22T11:13:39Z

84.157.23.138: Die Seite wurde neu angelegt: „ https://codepen.io/kholja/pen/JjEZBeN?editors=1111 // Add Clone at the End // Scale text to at least 100% (container overf…“

2021-04-16T06:51:41Z

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…“

Neue Seite

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>

@@ Zeile 2: / Zeile 2: @@
   https://codepen.io/kholja/pen/JjEZBeN?editors=1111
   https://greensock.com/forums/topic/10230-what-is-the-best-method-for-scrolling-text-horizontally-across-a-div/
-$(window).resize(resizeHandler);
+ https://codepen.io/kholja/pen/dyNQwLz?editors=1111

@@ Zeile 1: / Zeile 1: @@
   https://codepen.io/kholja/pen/JjEZBeN?editors=1111
 <syntaxhighlight lang="javascript">
 // Add Clone at the End