MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Animation Transition on MMM-Slideshow

    Scheduled Pinned Locked Moved General Discussion
    11 Posts 2 Posters 2.5k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      sdetweil @Ouaoua
      last edited by

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

      the images already transition in some timed cycle

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      O 1 Reply Last reply Reply Quote 0
      • O Offline
        Ouaoua @sdetweil
        last edited by

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

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @Ouaoua
          last edited by

          @Ouaoua ok, that would be css transitions

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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          O 1 Reply Last reply Reply Quote 0
          • O Offline
            Ouaoua @sdetweil
            last edited by

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

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @Ouaoua
              last edited by 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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              O 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil
                last edited by

                this showed up in my news feed

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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                O 1 Reply Last reply Reply Quote 0
                • O Offline
                  Ouaoua @sdetweil
                  last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • O Offline
                    Ouaoua @sdetweil
                    last edited by

                    @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

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @Ouaoua
                      last edited by 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
                      }

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil
                        last edited by

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

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy