Jump to content
Search Community

Animation "popping" after completion

Dizablah The Lamot test
Moderator Tag

Recommended Posts

So I am finally starting to get the hang of all this but I have come across a "pop." Where a line is done animating and it pops from it's end to what seems like a reload of the thing that I am animating which in this instance is .talent  - If you look at the CodePen you can tell exactly which one it is. I am sure there is something out there that I need to do but I don't even know if I am asking the right question.

Am I missing something that needs to happen at the end of the animation like a cleanup or something (I'm just talking out of my tukas at the point).

 

Thanks in advance,

Diza

See the Pen zYpZrxG by Dizablah (@Dizablah) on CodePen

Link to comment
Share on other sites

Thanks for the demo. With demos it's always good to minimize them as much as possible so that they only show the issue. I had a difficult time understanding what you were describing. 

27 minutes ago, Dizablah The Lamot said:

Where a line is done animating and it pops from it's end to what seems like a reload of the thing that I am animating which in this instance is .talent

I didn't notice any lines animating. perhaps you meant a  "a line of text"? but I didn't see anything wrong with the text either.

 

However, the thing with a class of ".talent" appears to be the image of the person on the right?

 

I think the issue you are describing is that the filter seems to flash. In this case it is necessary to have a starting filter value in the css. I added brightness(1) so that the animation would have a defined end state. 

 

Does this look better?

See the Pen xxppYMb?editors=0110 by snorkltv (@snorkltv) on CodePen

 

i took everything out that wasn't related to the .talent tween as it didn't seem necessary to replicate the issue.

If this isn't the issue, feel free to fork your demo with only the animation that needs work.

 

 

  • Like 4
Link to comment
Share on other sites

9 minutes ago, Carl said:

Thanks for the demo. With demos it's always good to minimize them as much as possible so that they only show the issue. I had a difficult time understanding what you were describing. 

Sorry about that! Still new around here. I will remember to minimize from now on!

 

9 minutes ago, Carl said:

I didn't notice any lines animating. perhaps you meant a  "a line of text"? but I didn't see anything wrong with the text either.

So the "line" I referring to was that particular line of code. I couldn't, at the moment, figure out how to describe what I was trying to convey.

 

9 minutes ago, Carl said:

I think the issue you are describing is that the filter seems to flash. In this case it is necessary to have a starting filter value in the css. I added brightness(1) so that the animation would have a defined end state. 

Ah yes I see. Wasn't sure if that was a CSS or GSAP thing.

 

9 minutes ago, Carl said:

Does this look better?

This is spot on! Thanks so much! I am guessing that I need to have definitive end values for other objects that I am trying to animate?

Thanks again Carl! You are the best!

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