How to properly clear inline styles on reverse complete?

[Huangism]

The simple pen shows the bg colour going from green to black then back to green. I am clearing props on reverse complete but I still see inline css after. 

 

How do I properly clear the inline styles?

 

 

See the Pen eYpwGyG by Huangism (@Huangism) on CodePen

[ZachSaucier]

Hey Huangism. GSAP is properly clearing the inline styles as it should. However, the element still has a background color applied from the CSS. If you want it to be transparent at the end, you should set the background color to transparent instead of clearing it  

 

By the way, you can just use a repeat + yoyo on the timeline and an onComplete if you want:

See the Pen JjYQOPx?editors=0010 by GreenSock (@GreenSock) on CodePen

[Huangism]

The bg colour in css is fine. If you inspect on the div, you can see the inline style is still there. The ending colour doesn't matter, it's just a simple example. I just want to remove the inline styles

[ZachSaucier]

2 minutes ago, Huangism said:

The bg colour in css is fine. If you inspect on the div, you can see the inline style is still there. The ending colour doesn't matter, it's just a simple example. I just want to remove the inline styles

You're adding it to the timeline at the end by using t.set(). Use gsap.set() if you want it to apply immediately.

[Huangism]

Ok, so to clear props, I should be using gsap.set and not the timeline. This worked on the Pen, i will try it in my project now thanks

[ZachSaucier]

2 minutes ago, Huangism said:

so to clear props, I should be using gsap.set and not the timeline.

Not exactly. You can use clear props in or outside of a timeline. That's not the point. The point is that at the point when you call the onReverseComplete, the timeline is paused and its playhead is at the 0 time mark. But you add the .set() at the end of the timeline (after the background is fully black in this case). So there's no way for the timeline to reach that point and thus call your .set().

[Huangism]

Ok, I kind of understand what you explained. So in my case, using gsap.set to clear prop is the proper way to do it? Or can it be done in the timeline setting somewhere? How would you clear props if we use the timeline? 

 

Edit: I think I completely understood what you explained, because I was setting something as part of the timeline but the timeline has already finished, so it does not work. Is that what you meant?

[ZachSaucier]

13 minutes ago, Huangism said:

So in my case, using gsap.set to clear prop is the proper way to do it?

It's a proper way to do it. Not the only way.

 

13 minutes ago, Huangism said:

can it be done in the timeline setting somewhere?

There are lots of ways you could do this sort of thing. You could add have one tween for making the background black and another for making it green. Then after the one that makes it green you could do the clearProps. 

 

I showed you my recommendation of what to do in my first post in this thread.

 

13 minutes ago, Huangism said:

I think I completely understood what you explained, because I was setting something as part of the timeline but the timeline has already finished, so it does not work. Is that what you meant?

That's part of it. The other part is that the playhead isn't even at the end, it's at the beginning because you called .reverse().

[Huangism]

Ok, I think I have a better understand how timeline works now, thanks