Animate text elements individually

[cereal_beast 1 Likes (Newbie)]

Im trying to achieve a multiple line text reveal effect where each line is revealed individually, shown here, but I cant figure out how to animate them individually. In this demo the text elements all have the same class and the code is just using that class to trigger and target?

See the Pen NWYGEKo by gjjr (@gjjr) on CodePen

[Cassie 4,540 Likes (Superhero)]

Hey there!

 

You need to loop around the titles like so -
 

//grab all the titles
let titles = gsap.utils.toArray(".title-text");

//loop around them
titles.forEach((title) => {
  // add a scrollTriggered tween for each title
  gsap.from(title, {
    y: "100%",
    duration: 0.8,
    scrollTrigger: {
      markers: true,
      trigger: title,
      start: "top center",
      end: "bottom center",
      scrub: 0.8
    }
  });
});

 

Also, you're using a timeline in the original demo (which will work) but timeline's are for sequencing multiple tweens.

e.g.

 

let tl = gsap.timeline();

tl.to(".title-text", {
   y: "100%",
})
tl.to(".something-else", {
   rotation: 360,
})

If you just have one animation you can just use a tween instead. Hope this helps!

[noviedo 31 Likes (Newbie)]

Hey @cereal_beast how is going?? you are using the same target for all titles, so this executes the triggers at the same time, so I did a quick refactor. I used an iterator to keep the correct trigger, and then I used the same animation!

I hope helps you!

See the Pen MWVazVe by nazarenooviedo (@nazarenooviedo) on CodePen

[cereal_beast 1 Likes (Newbie)]

Thank you guys!