Animation Transition on MMM-Slideshow

[Ouaoua]

Hello,
I would like to code something based on this module to add a transition animation (like appearing and disappearing with a set time).

Being a clear noob on coding, Could someone help me?

Here’s the link to the base module and my Issue : https://github.com/AdamMoses-GitHub/MMM-ImageSlideshow/issues/31#issue-1419373932

I tried to copy some lines from the MMM-Imagesphoto modules but can’t seem to make it work

Thanks to anyone seeing this

[sdetweil]

@Ouaoua I am not sure what animation with set time means.

the images already transition in some timed cycle

[Ouaoua]

@sdetweil Something like a fade in / fade out (like those transition on Powerpoint :D)

[sdetweil]

@Ouaoua ok, that would be css transitions

you can add those to the class used for the images without writing any JavaScript code

[Ouaoua]

@sdetweil So I just have to add in the module js file

Transition: width 2s;

Or do I have to add something in the css file?

[sdetweil]

@Ouaoua you would add css settings to

~/MagicMirror/css/custom.css
(if it doesn’t exist, create it
touch ~/MagicMirror/css/custom.css

then it would be

.modulename .class { (// like .MMM-Slideshow
and whatever css operations are to be applied to that class
}

see
https://stackoverflow.com/questions/11660710/css-transition-fade-in

the MM css design is a stack

custom.css at the top
module .css in the middle
main.css at the bottom

the layout searchs custom 1st, then module then main
1st found wins

here is a post about how to use the browser dev window to locate content classes and styles and temporarliy mod them to get the effect , and learn what u need to put in custom.css

https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1666112800952

[sdetweil]

this showed up in my news feed

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

[Ouaoua]

@sdetweil Thanks a lot for your help!!! <3

[Ouaoua]

@sdetweil Ok So I wrote the code in the custom.css file as you said but in the website you sent me it is written that I need to add a line in the js file of the module too.

The line:

<h1 class="fade-in">Fade Me Down Scotty</h1>

Obviously I need to change “Fade Me Down Scotty”

I tried to add it myself but can’t make it work as I don’t know where to put this in the js file of the module.

Could you help me one last time?

Thanks a lot :D

[sdetweil]

@Ouaoua

so the css starts

.MMM-SlideShow .fade-in {
… whatever
}

now you need to replace fade-in w the class u find on the image already created by the module

if no unique cllass, the u can select the image tag element

.MMM-SlideShow img {
…whatever
}

[sdetweil]

also make sure to increase the slide interval config, as the module will not know about the longer fade time