Fork animation #6

Closed
opened 2 years ago by mray · 48 comments
mray commented 2 years ago
Collaborator

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)

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)*
Poster
Collaborator

smaller version (dimension & frames)

smaller version (dimension & frames)
Poster
Collaborator

Smoothed out animation a bit…

Smoothed out animation a bit…
hw commented 2 years ago
Owner

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

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

Yes it is transparent.

Yes it is transparent.
Poster
Collaborator

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

Do we need any other format/asset to proceed here?
hw commented 2 years ago
Owner

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

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

This is still rendering the old logo?

This is still rendering the old logo?
hw commented 2 years ago
Owner

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?

> 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?
Collaborator

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

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

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.

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.
Collaborator

Was conversion to another video format possible?

EDIT: Nevermind...

Was conversion to another *video* format possible? EDIT: Nevermind...
Poster
Collaborator

I'm on it to create a transparent gif…

I'm on it to create a transparent gif…
Poster
Collaborator

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

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

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

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

Ok here are the animation files in different formats

Ok here are the animation files in different formats
hw commented 2 years ago
Owner

Committed to 94cc56dc63 and 23880263d5

Committed to https://codeberg.org/Codeberg/build-deploy-gitea/commit/94cc56dc6325cc7725ee199f5b0f37bf5fe92e7d and https://codeberg.org/Codeberg/build-deploy-gitea/commit/23880263d51ad06dd50735496a7b9e6dce79ff3a
Poster
Collaborator

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

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

Can this be closed now?

Can this be closed now?
hw commented 2 years ago
Owner

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

still waiting for next deployment of production I guess ... @ashimokawa ?
hw commented 2 years ago
Owner

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

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

I'm not sure how to do that.

I'm not sure how to do that.
hw commented 2 years ago
Owner

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

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

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, 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. 🤷
hw commented 2 years ago
Owner

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).

> 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).
Poster
Collaborator

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

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
hw commented 2 years ago
Owner

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

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

I must be doing something wrong…

I must be doing something wrong…
148 KiB
hw commented 2 years ago
Owner

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

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

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?

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?
hw commented 2 years ago
Owner

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?

> 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?
Poster
Collaborator

Yes, but we would lose transparency :P

Yes, but we would lose transparency :P
hw commented 2 years ago
Owner

mh.

mh.
n added the
Part: Logo
label 10 months ago
Poster
Collaborator

Can this issue be closed?

Can this issue be closed?
n commented 10 months ago
Collaborator

Yes but the border still isn't ideal.

Yes but the border still isn't ideal. [![](https://codeberg-test.org/assets/img/loading.png)](https://codeberg-test.org/assets/img/loading.png)
Poster
Collaborator

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

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

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

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

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 ;)

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 ;)
n commented 10 months ago
Collaborator

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.

> 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. ```html <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.
Poster
Collaborator

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

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

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

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

That works! Though it seems like Safari doesn't support WebM... Maybe a WebP file could work if you can export to that.
Poster
Collaborator

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

GIF or apng should suffice as fallback option - right? Both are linked on comment https://codeberg.org/Codeberg/Design/issues/6#issuecomment-123632 .
mray started working 10 months ago
mray stopped working 10 months ago
3s
n commented 10 months ago
Collaborator

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

It would, but WebP is ideal since it is supported on all [browsers supported by Gitea](https://docs.gitea.io/en-us/#browser-support), supports transparency and is an image.
Poster
Collaborator

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…

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…
n commented 10 months ago
Collaborator

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

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

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'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.
n commented 10 months ago
Collaborator

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.

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.
Poster
Collaborator

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.

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.
n commented 10 months ago
Collaborator

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

Yep, we've got a fork animation with the new logo.
n closed this issue 10 months ago
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Total Time Spent: 3s
mray
3s
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.