Fade-in/Fade-out with Electron

Beh

Hi,
I’m currently building my own mirror. I’ll start building the frame tomorrow.
I’m also writing a module which will give you current information for public transport departures in Berlin and Brandenburg (using the HAFAS realtime data by VBB).
For the list with the departures I’d like to fade the old list items out and the new items in, so that there is some kind of “rolling” effect.

It should look something like this when the module gets updated:

(time) (list item)
-2min item1 <------ fade out
-1min item2 <------ fade out
now item3
+1min item4
…
+9min itemX
+10min itemY <----- fade in

Does Electron have such a feature? Or can I just import jQuery and use the fadeIn() and fadeOut() from there? Or does anyone of you has an idea which node framework provides such UI features?

Thanks and Greetings
Beh

strawberry 3.141

@Beh do you want something like this?

then you can have a look in here, credits go to @ianperrin

Beh

@strawberry-3-141
Yeah, after digging the code, I think that is what I was looking for :=)
I didn’t think it was THAT easy ^^’
Thank you very much!

strawberry 3.141

especially have a look at the following lines https://github.com/fewieden/MMM-soccer/blob/046346597ca7b1429b0a1f6e6c55c8f0624373a7/MMM-soccer.js#L169

Beh

yes, already got them :) thanks!

Do I have to mark this topic as solved? (And if yes, how?) Or is this done by the admins?

ianperrin

and also take a look at https://github.com/MichMich/MagicMirror/blob/develop/modules/default/weatherforecast/weatherforecast.js#L142 - this is where the MMM-soccer fade functionality was derived from

credits to @MichMich and the MM team :)