Share Posted June 27, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted June 27, 2019 Is this what you need? See the Pen agVqJe by PointC (@PointC) on CodePen Happy tweening. 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 27, 2019 That's exactly what i need. I knew I needed a loop, didn't know how to make it. Thanks a lot 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 28, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted June 28, 2019 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now