• 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.
  • 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
                  9/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