Jump to content
Search Community

How do I apply a timeline to each item?

goodcontext test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello, I would like to change the color of the text to blue for each "LOREM IPSUM" text.

Now, contrary to my intention, the whole text changes color at once.

I think I need to change it individually using something like forEach.

I don't know how to implement it because it's related to timeline.

I'd like you to give me an example code.

 

See the Pen dyjxewP by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites

See the Pen QWBeVdv by goodcontext (@goodcontext) on CodePen

 

Thank you very much for your quick reply.

By the way, what I want is a method using timeline.

I just changed the color of the letter to blue to simplify it, but I actually use .to a lot.

How do I use timeline?

 

I made a timeline. Now, everything turns blue when I start.

How do I get started in a non-executed state?

 

And I'm just asking because I'm curious.

If it's not "display: inline-block", it doesn't apply even if I specify x or y values.

why is this?

Link to comment
Share on other sites

  • Solution

Here's your problem: 

// BAD
gsap.timeline(menuText, {paused: true});

// GOOD
gsap.timeline({paused: true});

 

30 minutes ago, goodcontext said:

If it's not "display: inline-block", it doesn't apply even if I specify x or y values.

Browsers won't apply transforms to display: inline elements. It has nothing to do with GSAP - it's what the spec dictates I believe. 

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