• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.1k 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 Oct 22, 2022, 8:07 PM

    @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 Oct 23, 2022, 8:24 AM Reply Quote 0
    • O Offline
      Ouaoua @sdetweil
      last edited by Oct 23, 2022, 8:24 AM

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

      S 1 Reply Last reply Oct 23, 2022, 11:19 AM Reply Quote 0
      • S Offline
        sdetweil @Ouaoua
        last edited by Oct 23, 2022, 11:19 AM

        @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 Oct 23, 2022, 5:45 PM Reply Quote 0
        • O Offline
          Ouaoua @sdetweil
          last edited by Oct 23, 2022, 5:45 PM

          @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 Oct 23, 2022, 6:53 PM Reply Quote 0
          • S Offline
            sdetweil @Ouaoua
            last edited by sdetweil Oct 23, 2022, 6:54 PM Oct 23, 2022, 6:53 PM

            @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 Oct 23, 2022, 11:47 PM Reply Quote 0
            • S Offline
              sdetweil
              last edited by Oct 23, 2022, 6:58 PM

              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 Oct 23, 2022, 10:54 PM Reply Quote 0
              • O Offline
                Ouaoua @sdetweil
                last edited by Oct 23, 2022, 10:54 PM

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

                1 Reply Last reply Reply Quote 0
                • O Offline
                  Ouaoua @sdetweil
                  last edited by Oct 23, 2022, 11:47 PM

                  @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 Oct 24, 2022, 12:31 AM Reply Quote 0
                  • S Offline
                    sdetweil @Ouaoua
                    last edited by sdetweil Oct 24, 2022, 12:37 AM Oct 24, 2022, 12:31 AM

                    @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 Oct 24, 2022, 1:02 AM

                      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
                      1 / 2
                      • First post
                        6/11
                        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