• 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.0k 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.
  • O Offline
    Ouaoua
    last edited by Oct 22, 2022, 3:55 PM

    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

    S 1 Reply Last reply Oct 22, 2022, 8:07 PM Reply Quote 0
    • 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
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        2/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