Anatole: Page load animation missing transparency; animation potentially overdone.

[cdichiara]

Pages jump down and gradually stop about 1-2 lines of text lower. Seen on Windows 10 x64/updated Chrome, reproducible by refreshing the page. Is this the FadeInDown animation? Do you want the website to jump down like that? I noticed it does it as well for your personal website @lxndrblz, so I suspect it's known to you and perhaps works as designed. It just seems a bit surprising to me.

Carmine

[lxndrblz]

Yes this animation is intended, but I can be switched off. Simply disable the animation in the config.toml.

doNotLoadAnimations = true

[cdichiara]

Oh now I get it ... this is the animation FadeInDown? I think the issue is that it's not fading in.
https://www.alexbilz.com/

Does it look like it's fading in on your website to you? Perhaps it's my browser?

Carmine

[lxndrblz]

@cdichiara it (sort of does) for me. It's like a movement from top to bottom, not necessarily a fade (change of transparency) despite the name. So I guess that might have caused some confusion.

[cdichiara]

Ah OK so maybe this is your design choice. :) Thanks I'll close this issue. I'm going to re-add a fade to my fork, see what it's like ... if you don't like what it looks like we'll just get rid of it.

[lxndrblz]

@cdichiara I was never too satisfied with the animation, as I personally find it a bit distracting. This is mainly remnant from the original theme, this Hugo theme is based on. If you produce a better animation, I would be interested to see it. 👍

[cdichiara]

Oh I just think there are two lines that are missing:

https://www.tutorialspoint.com/css/css_animation_fade_in_down.htm

opacity: 0

opacity: 1

Someone must have removed them at some point. So at least we can see what Fade In Down looks like before you decide. :)

I'd test it out but I'm having a real struggle getting my testbed website to pick up the changes I make in the forked theme. :-/

[lxndrblz]

@cdichiara yeah I believe it existed before. :) I'll do some digging why it might have gotten removed. Let me know what your test yielded.

[cdichiara]

Ah, it seems like the animation is what's messing up the initial render of the recaptcha. Note that I added the transparency back in here:
https://user-images.githubusercontent.com/13836864/104212463-3e318580-5403-11eb-8ad0-28fdbdbe47d2.mp4

So I could probably tell the recaptcha to go to the upper righthand corner, probably wouldn't change its location too much in the block ... though honestly this animation is annoying to me when it's on every page. I'd like the animation to be only on the front page, which would solve this issue ...

So it's up to you, if you want I can put a little bit of time into making the recaptcha not dependent upon the bottom righthand corner, but I'd rather put time into making the animation more selective to the landing page only. What do you think?

Carmine

[lxndrblz]

@cdichiara Can you please open a PR to this repository with all the changes you had made, and I will have a look what works best (disabling the animation/placing the captcha somewhere else.)?