Split text with gsap timeline

[Kutomba]

Hi,

 

I am learning gsap, I found this example on codepen 

 

Now I would like to use gsap.timeline or gsap TimelineMax,  I change it like this 

 

var text = $(".split");

var split = new SplitText(text);
var  tl = new TimelineMax(); // added timelinemax here 
function random(min, max){
	return (Math.random() * (max - min)) + min;
}

$(split.chars).each(function(i){
	tl.from($(this), 2.5, { // and used it here
		opacity: 0,
		x: random(-500, 500),
		y: random(-500, 500),
		z: random(-500, 500),
		scale: .1,
		delay: i * .02,
		yoyo: true,
		repeat: -1,
		repeatDelay: 10
	});
});

 

Unfortunatelly this is not animating as expected, what do I need to change here to get the same result but using timeline?

 

Thanks

Kutomba

See the Pen xGyZXp by natewiley (@natewiley) on CodePen

[ZachSaucier]

Hey Kutomba. It doesn't make much sense to add a timeline to that animation because the tweens are animating infinitely anyway. That's why it doesn't work as expected (because the second tween is placed after a tween of infinite length).

 

Why are you trying to do this? What's your goal?

[PointC]

You'd need to add the position parameter of 0 so all the tweens start at the same time. The way you have it now would just be a sequence.

I'd also recommend using the newer GSAP 3 syntax.

GSAP 3 also has a built in random utility method

https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

Happy tweening.

 

[Kutomba]

Hi Zach,

 I am trying to synchronise with my video timeline,  I learned it's possible to synchronise gsap animation with video timeline,  So Is it possible with this kind of animation to animte using timeline if yes what is missing?

[ZachSaucier]

First, update to GSAP 3 (including using the new syntax) like Craig suggested. Then remove the following because you don't want repeats if you're syncing things most likely:

yoyo: true,
repeat: -1,
repeatDelay: 10

Then add paused: true so that the tween doesn't run. 

 

Then inside of your video's update callback, update the .progress() of your tween.

 

There are several existing threads that sync animations with video. Here are a couple I found after a quick search: