Jump to content
GreenSock

cereal_beast

Animate text elements individually

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×