SplitText Loop

[romain.gr]

Hi,

 

I have created a timeline and some split text, the result is good (that's what I want to achieve), but how can I loop through each items and animate them one after the other. It's working in my case but it's not very maintainable, what if I had one more item in the html? I would have to add stuff to my timeline all the time, I'm a bit confused, I've been trying different options without success.

 

Here is the structure : 

 

<h1 class="home-title" >
	<span class="home-title__slider__item home-title__slider__item--active">
		<span>WE EXIST TO DEEPEN</span><span>OUR UNDERSTANDING OF</span><span><b>EDUCATIONAL CHALLENGES</b></span><span><b>AND HELP FIND SOLUTIONS</b></span><span><b>TO TACKLE THEM.</b></span> 
	</span>
	<span class="home-title__slider__item">
		<span>WE EXIST TO FORGE</span><span><b>PARTNERSHIPS</b> </span><span><b>TO STRENGTHEN</b> </span><span><b>THE IMPACT</b> </span><span><b>OF OUR WORK.</b></span>
	</span>
	<span class="home-title__slider__item">
		<span>WE EXIST TO BUILD</span><span><b>INNOVATIVE PROGRAMS</b></span><span><b>THAT ADDRESS</b></span><span><b>EDUCATION PRIORITIES.</b></span>
	</span>
	<span class="home-title__slider__item">
		<span>WE EXIST TO INFORM </span><span><b>EDUCATION POLICY</b></span><span><b>-MAKING THROUGH</b></span><span><b> RIGOROUS RESEARCH.</b></span>
	</span>
</h1>

 

 Here is the JS :

 

var splitTextItem1  = new SplitText($('.home-title__slider__item')[0], {type:"chars"}),
		chars1 = splitTextItem1.chars,
		splitTextItem2  = new SplitText($('.home-title__slider__item')[1], {type:"chars"}),
		chars2 = splitTextItem2.chars,
		splitTextItem3  = new SplitText($('.home-title__slider__item')[2], {type:"chars"}),
		chars3 = splitTextItem3.chars,
		splitTextItem4  = new SplitText($('.home-title__slider__item')[3], {type:"chars"}),
		chars4 = splitTextItem4.chars;
		

var tl = new TimelineMax({pause: true, repeat: -1});

tl.set($('.home-title__slider__item')[0], {autoAlpha: 1, display: 'block', delay: 2})
	.staggerFrom(chars1, 0, {opacity: 0}, .05)
	.set($('.home-title__slider__item')[0], {autoAlpha: 0, display: 'none', delay: 2})
	.set($('.home-title__slider__item')[1], {autoAlpha: 1, display: 'block'})
	.staggerFrom(chars2, 0, {opacity: 0}, .05)
	.set($('.home-title__slider__item')[1], {autoAlpha: 0, display: 'none', delay: 2})
	.set($('.home-title__slider__item')[2], {autoAlpha: 1, display: 'block'})
	.staggerFrom(chars3, 0, {opacity: 0}, .05)
	.set($('.home-title__slider__item')[2], {autoAlpha: 0, display: 'none', delay: 2})
	.set($('.home-title__slider__item')[3], {autoAlpha: 1, display: 'block'})
	.staggerFrom(chars4, 0, {opacity: 0}, .05)
	.set($('.home-title__slider__item')[3], {autoAlpha: 0, display: 'none', delay: 2})


tl.play();

 

Could someone suggest a solution I could try?

 

Thank you

See the Pen qzVjPP by romaingranai (@romaingranai) on CodePen

[PointC]

Is this what you need?

 

See the Pen agVqJe by PointC (@PointC) on CodePen

 

Happy tweening.

 

[romain.gr]

That's exactly what i need. I knew I needed a loop, didn't know how to make it.

 

Thanks a lot

[romain.gr]

Hey,

 

I've been playing with your version, actually I'm trying to add some delay label and remove classes (it remove the "letter-blink" class for each letter, and give that "typing" effect), but as soon as I'm adding this "end" label to the 

anim.staggerFrom(chars, 0, { autoAlpha: 0, display: 'none' }, 0.1, 'end');

, it works for the first item but break the rest of the animation. It seems quite easy to achieve but I'm on that for at least 2 hours.

 

var targets = document.querySelectorAll(".home-title__slider__item");
var anim = new TimelineMax({ paused: true, repeat: -1 });
for (let i = 0; i < targets.length; i++) {
	var splitTextItem = new SplitText(targets[i], { type: "chars", charsClass: "letter letter-blink" });
	var chars = splitTextItem.chars;
	anim.set(targets[i], { autoAlpha: 1, display: "block", delay: .5 });
	anim.staggerFrom(chars, 0, { autoAlpha: 0, display: 'none' }, 0.1, 'end');
	anim.staggerTo(chars, 0, {css:{className:'-=letter-blink'}}, 0.1, 'end+=.1');
	anim.set(targets[i], { autoAlpha: 0, display: "none", delay: 2 });
}

anim.play();

 

See the Pen PrOQJK by romaingranai (@romaingranai) on CodePen

 

Thanks

[PointC]

The problem there is you're using "end" as a label for all the letter groups in the loop so they all fire at the same time. You need a unique label for each iteration. You can do that by creating a label like "end" + i. 

 

See the Pen PrEKJY by PointC (@PointC) on CodePen

 

Happy tweening.