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.

    Delete Fade In/Fade Out animation in the NewsFeed Module

    Scheduled Pinned Locked Moved Custom CSS
    11 Posts 2 Posters 877 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 Do not disturb
      sdetweil @victorjim
      last edited by sdetweil

      @victorjim the animationSpeed setting (default 2.5 seconds) determines how quickly the content changes

      see the documentation link in the header

      maybe make it 100 milliseconds, or 0, no delay

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      V 1 Reply Last reply Reply Quote 0
      • V Offline
        victorjim @sdetweil
        last edited by

        @sdetweil
        Thanks for your reply, but I’ve already given several values ​​to the animationSpeed ​​variable and I haven’t gotten the desired results.
        Would it be possible to remove the animation completely?
        Thanks

        1 Reply Last reply Reply Quote 0
        • S Do not disturb
          sdetweil @victorjim
          last edited by

          @victorjim can you show me the config.js for newsfeed

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          V 1 Reply Last reply Reply Quote 0
          • V Offline
            victorjim @sdetweil
            last edited by

            @sdetweil Hello
            This is my code, I use a single screen to display 4 news.

            /* Config Sample
             *
             * For more information on how you can configure this file
             * see https://docs.magicmirror.builders/configuration/introduction.html
             * and https://docs.magicmirror.builders/modules/configuration.html
             *
             * You can use environment variables using a `config.js.template` file instead of `config.js`
             * which will be converted to `config.js` while starting. For more information
             * see https://docs.magicmirror.builders/configuration/introduction.html#enviromnent-variables
             */
            let config = {
            	address: "localhost",	// Address to listen on, can be:
            							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
            							// - another specific IPv4/6 to listen on a specific interface
            							// - "0.0.0.0", "::" to listen on any interface
            							// Default, when address config is left out or empty, is "localhost"
            	port: 8080,
            	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
            									// you must set the sub path here. basePath must end with a /
            	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
            									// or add a specific IPv4 of 192.168.1.5 :
            									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
            									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
            									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
            
            	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
            	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
            	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true
            
            	language: "es",
            	locale: "es-ES",
            	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
            	timeFormat: 24,
            	units: "metric",
            
            	modules: [
            		
            		{
            			module: "newsfeed",
            			position: "top_bar",
            			reloadInterval: 60000,
            			animationSpeed: 5*1000,
            			config: {
            				feeds: [
            				{
            					title: "Portada Periodico de Aragon",
            					url: "https://www.elperiodicodearagon.com/rss/section/23500"
            				}
            				],
            				showSourceTitle: true,
            				showPublishDate: true,
            				showDescription: true,
            				broadcastNewsFeeds: true,
            				broadcastNewsUpdates: true
            			}
            		},
            		{
            			module: "newsfeed",
            			position: "top_bar",
            			reloadInterval: 60000,
            			animationSpeed: 5*1000,
            			config: {
            				feeds: [
            				{
            					title: "Portada Periodico ABC",
            					url: "https://www.abc.es/rss/2.0/portada/"
            				}
            				],
            				showSourceTitle: true,
            				showPublishDate: true,
            				showDescription: true,
            				broadcastNewsFeeds: true,
            				broadcastNewsUpdates: true
            			}
            		},
            		{
            			module: "newsfeed",
            			position: "top_bar",
            			reloadInterval: 60000,
            			animationSpeed: 5*1000,
            			config: {
            				feeds: [
            				{
            					title: "Portada El Mundo",
            					url: "http://estaticos.elmundo.es/elmundo/rss/espana.xml"
            				}
            				],
            				showSourceTitle: true,
            				showPublishDate: true,
            				showDescription: true,
            				broadcastNewsFeeds: true,
            				broadcastNewsUpdates: true
            			}
            		},
            		{
            			module: "newsfeed",
            			position: "top_bar",
            			reloadInterval: 60000,
            			animationSpeed: 5*1000,
            			config: {
            				feeds: [
            				{
            					title: "Portada Libertad Digital",
            					url: "http://feeds2.feedburner.com/libertaddigital/portada"
            				}
            				],
            				showSourceTitle: true,
            				showPublishDate: true,
            				showDescription: true,
            				broadcastNewsFeeds: true,
            				broadcastNewsUpdates: true
            			}
            		},
            	]
            };
            
            /*************** DO NOT EDIT THE LINE BELOW ***************/
            if (typeof module !== "undefined") { module.exports = config; }
            

            I hope I haven´t written this code wrong.
            The reason for putting the 4 modules separately is so that I can control the space between them a bit since, I have no experience with CSS.
            Thank you.

            S 1 Reply Last reply Reply Quote 0
            • S Do not disturb
              sdetweil @victorjim
              last edited by sdetweil

              @victorjim

                  reloadInterval: 60000,
                  animationSpeed: 5*1000,
              

              those two properties are for the module, not MagicMirror, so they should be inside the config:{ section, here is the doc for module parameters for MagicMirror,
              https://docs.magicmirror.builders/modules/configuration.html#example

              	animationSpeed: 5*1000,
              

              means 5 seconds for each news item to appear and disappear. longer animation

              you want it to be shorter or not at all

              	animationSpeed: 0,
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              V 1 Reply Last reply Reply Quote 0
              • V Offline
                victorjim @sdetweil
                last edited by

                @sdetweil
                I changed the animationSpeed: value to 0, and it still does the Fade In/Fade Out animation.
                Nothing has changed. What I would like is to remove the animation and leave the text fixed.
                Thanks.

                S 1 Reply Last reply Reply Quote 0
                • S Do not disturb
                  sdetweil @victorjim
                  last edited by

                  @victorjim said in Delete Fade In/Fade Out animation in the NewsFeed Module:

                  I changed the animationSpeed: value to 0, and it still does the Fade In/Fade Out animation.

                  did you MOVE the animationSpeed:0, INSIDE the config:{} section of the module definition??

                  otherwise the module will not see that setting

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  V 1 Reply Last reply Reply Quote 0
                  • V Offline
                    victorjim @sdetweil
                    last edited by

                    @sdetweil

                    I don’t understand well, I have changed the variable animationSpeed: 0 in the config.js file inside the /MagicMirror/config/ folder

                    Like this code:

                    modules: [
                    		
                    		{
                    			module: "newsfeed",
                    			position: "top_bar",
                    			reloadInterval: 60000,
                    			animationSpeed: 0,  //  In this position
                    			config: {
                    				feeds: [
                    				{
                    					title: "Portada Periodico de Aragon",
                    					url: "https://www.elperiodicodearagon.com/rss/section/23500"
                    				}
                    				],
                    				showSourceTitle: true,
                    				showPublishDate: true,
                    				showDescription: true,
                    				broadcastNewsFeeds: true,
                    				broadcastNewsUpdates: true
                    			}
                    		},
                    
                    1 Reply Last reply Reply Quote 0
                    • S Do not disturb
                      sdetweil
                      last edited by sdetweil

                      @sdetweil said in Delete Fade In/Fade Out animation in the NewsFeed Module:

                      in a prior post I said

                      those two properties are for the module, not MagicMirror, so they should be inside the config:{ section, here is the doc for module parameters for MagicMirror,

                      so

                      		{
                      			module: "newsfeed",
                      			position: "top_bar",
                      // move These TWO parameters
                      			reloadInterval: 60000,   
                      			animationSpeed: 0,
                      // INSIDE the config:{ section 
                      
                      			config: {
                      				feeds: [
                      				{
                      					title: "Portada Periodico de Aragon",
                      					url: "https://www.elperiodicodearagon.com/rss/section/23500"
                      				}
                      				],
                      				showSourceTitle: true,
                      				showPublishDate: true,
                      				showDescription: true,
                      				broadcastNewsFeeds: true,
                      				broadcastNewsUpdates: true,
                      // like this 
                      		        	reloadInterval: 60000,   
                      			        animationSpeed: 0
                      			}
                      		},
                      

                      module: …to config: { belong to MagicMirror, NOT the module
                      config: {… } belong to the module

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      V 1 Reply Last reply Reply Quote 0
                      • V Offline
                        victorjim @sdetweil
                        last edited by

                        @sdetweil

                        Ok
                        Now I understand.
                        The 2 variables must be set in the configuration of each news.
                        Now it is corrected and works.
                        Thank you very much.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 2 / 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