Fork animation #6

The fork animation needs to be ported to the new logo. Here is what I think does the trick. (Inline webm seems to not be supported in gitea :/ )

ping @hw

(I did not want to further the already exhaustive issue #3, so I created this separate one)

loading_webm.webm

56 KiB

smaller version (dimension & frames)

fork-animation2.webm

18 KiB

Smoothed out animation a bit…

fork-animation3.webm

23 KiB

cool! The background is transparent? (Reason for animated PNG was background transparency).

Yes it is transparent.

Do we need any other format/asset to proceed here?

Somehow it seems it was never part of the assets deployed and tested on https://codeberg-test.org? Need a PR for integration

This is still rendering the old logo?

Do we need any other format/asset to proceed here?

seems some common browsers are still lacking proper webm support; would the better-supported animated PNG or GIF be possible?

Or a fallback to another video format only for certain browsers.
Much similar to how we're doing it on Codeberg/Documentation.

problem is I was not able to convert the webm preserving quality and transparency. If someone has a working cli commandline to convert to animated png/gif whatever (or just paint the background white to play nice on the template) please post it.

Was conversion to another video format possible?

EDIT: Nevermind...

I'm on it to create a transparent gif…

Exported to single frames from enve to GIMP and exported as gif;

fork-animation.gif

66 KiB

Hm browser frames speed seems to be inconsistent… have to figure that out still :/

Ok here are the animation files in different formats

fork-animation.gif

66 KiB

fork-animation.webm

34 KiB

fork-animation-APNG.png

136 KiB

Committed to 94cc56dc63 and 23880263d5

btw, the latest webm file is rendered at a slightly higher quality, removing some artifacts…

Can this be closed now?

still waiting for next deployment of production I guess ... @ashimokawa ?

just tested on codeberg-test, there it is deployed -- can you run a test too?

I'm not sure how to do that.

The animation is shown if you start a migration for a repository (the '+' button in the top navbar).

But it's not yet live on codeberg.org, and I don't seem to be able to login to codeberg-test with my normal credentials… and a mailinator.com address does not seem to get any confirmation email.

🤷

But it’s not yet live on codeberg.org ...

:) now it is, .. sorry for delay.

I don’t seem to be able to login to codeberg-test with my normal credentials

The two instances do not share any data for security reasons, imagine -test as sandbox that can be reset at any point in time.

mailinator.com address [...]

throwaway email providers are blacklisted as commonly used for registration of abusive bots (pretty much 100% of them).

I can't manage to make it appear - maybe the repos I forked were too small so the tanimation does not even show up? But I even tried forking gitea, and it was there instantly - are our servers just too damn fast?!?! :P

hm, I just tried again with github.com/go-gitea/gitea and it worked for me?

I must be doing something wrong…

fork.webm

148 KiB

:) not fork, migrate (the "+" button in the navbar)

OH I see. You now have a rough picture of how much I dislike git :D.

The premultiplied alpha border looks crazy bad in the png that I saw.
Can we make the webm the default, and gif as fallback?

The premultiplied alpha border looks crazy bad in the png that I saw.
Can we make the webm the default, and gif as fallback?

Would this problem go away if the background is rendered white not transparent?

Yes, but we would lose transparency :P

mh.

Can this issue be closed?

Yes but the border still isn't ideal.

That's not the webm file - can't we use that instead?

If the webm works fine, that is. Not sure where the file is being used and how problematic webm is otherwise.

Oh, another solution would be to crop it by putting it in an extra div and give it insanely rounded corners and "crop" it round inside the browser ;)

That's not the webm file - can't we use that instead?

I tried this for the WebM file but the background wasn't transparent.

<video src="https://codeberg.org/attachments/8c772ab1-2536-4202-8e2a-ef69a5764c2b" loop="true" autoplay="true" muted="true"></video>

Oh, another solution would be to crop it by putting it in an extra div and give it insanely rounded corners and "crop" it round inside the browser ;)

Unfortunately rounding it with border-radius:50%; doesn't fix the issue.

Check out this webm on white background and apply the rounded border (border-radius: 200px) to the video element itself. Should work(tm)

fork-animation_onwhite.webm

29 KiB

That works! Though it seems like Safari doesn't support WebM...

Maybe a WebP file could work if you can export to that.

GIF or apng should suffice as fallback option - right? Both are linked on comment #6 .

It would, but WebP is ideal since it is supported on all browsers supported by Gitea, supports transparency and is an image.

I have no hard feelings as to what we use as fallback - webp sounds nice, but I don't know how to create those on the top of my head…

What software are you using? There might be a way to export as WebP.

I'm using enve https://maurycyliebner.github.io/ - but I guess there probably is a way to convert from one thing that enve supports to an animated webp.

I can't even figure out how to export to anything other than SVG 🙃. I didn't even know you can animate SVG! SVG would probably work too if you could upload that.

You're right, an SVG animation is probably the cleanest solution! I just have to find time to figure out how to do that.

For now we should have an acceptable solution, though don't we? Because if we do, we can close this issue at least.

Yep, we've got a fork animation with the new logo.