joelshepherd / tabliss

A beautiful, customisable New Tab page for Firefox, Chrome, and Edge.
https://tabliss.io
GNU General Public License v3.0
2.15k stars 281 forks source link

Fade between images when new one is loaded? #623

Open mxmilkiib opened 11 months ago

mxmilkiib commented 11 months ago

I found it a bit jarring to have the new tab background suddenly jump to a new image when I was focusing on something whilst in front of the computer.

mxmilkiib commented 11 months ago

Having a check about, I see an example like https://gist.github.com/CodeMyUI/64552ba973a4f3f9953edd4f33ed22c0

Not sure how to reproduce with CSS overrides though.

NoschdarSindy commented 11 months ago

I tried to implement a cross-fade too, but found no easy way to do it in React, because when the old image unmounts it's too late to make it fade. The only idea I have would be to fade-in the new image on top of the old one and afterwards remove the old one.

the-wright-jamie commented 10 months ago

How about a fade to black and then fade in the new image, rather than a cross-fade?

the-wright-jamie commented 9 months ago

Hey, @mxmilkiib, my fork just implemented a fade-to-black transition. Couldn't get a cross fade, but it's much better than a hard cut. It's a rather scuffed implementation, but it's working! Coming out once I finish the 1.2.0 milestone (one more issue left)