Animated Image Refresh

[R4R3side.h3n741]

Hey Jaxel, or anyone who can help

I've created my own animated nameplates in Photoshop.. the tutorial was great in introducing a way to have them stylishly drop from above.
How can I have the image start invisible, vanish and reappear starting the animation over in a similar manner? (also without moving up and down)

https://imgur.com/a/Y1aGlz9

also if I can get help on why it bounces after the animation finishes, this doesn't happen outside of OBS

 

[Jaxel]

And the "bounce" could be related to your animations stretching beyond the bounds of the viewport during an elastic easing (which I believe is the default easing method)... in which case the browser is temporarily adding a scroll bar; which changes the dimensions of the viewport by 21 pixels. Then when the elastic easing finishes, the scrollbar isn't needed anymore, so the viewport reverts again by 21 pixels.

Try setting body: { overflow: hidden; } in your CSS to see if it fixes it.

You can read more about easing methods here: https://api.jqueryui.com/easings/