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 656 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.
    • V Offline
      victorjim
      last edited by

      First of all I want to say hello to this huge community.
      I recently created my first MagicMirror with the default modules and in the NewsFeed module (I have several news channels) I cannot read it naturally because the Description and Titles are constantly appearing and disappearing.
      Is there a solution so that no animation appears?
      Thanks for your answers.

      S 2 Replies Last reply Reply Quote 0
      • S Offline
        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 Offline
            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 Offline
                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 Offline
                    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 Offline
                        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
                        • 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