Jump to content
Search Community

Animate text elements individually

cereal_beast test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

  • 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.



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

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.
  • Create New...