"}],"short_description":"Map Viewer now supports applying custom animations to your own symbols.","flexible_content":[{"acf_fc_layout":"content","content":"Symbol animations have been available for a few releases now in ArcGIS Online. Initial support was introduced for point symbols through the Animation symbol gallery. In the following release, support was expanded to include line and polygon animations. Now, in the February release of ArcGIS Online, Map Viewer allows you to add animations to your own symbols.<\/p>\n
Symbol animations are supported across point, line, and polygon vector symbols. These can include default symbols from the provided galleries like points of interest, lines and polygon fill. You can even use your own symbol galleries published as web styles, or SVGs uploaded through the Symbol Styler. Animations work across various mapping styles and are also supported for sketch features.<\/p>\n"},{"acf_fc_layout":"content","content":"
How to add animations<\/strong><\/p>\n When you open the Symbol Styler in Map Viewer, make sure the selected symbol is a vector point, line, or polygon. Once a vector symbol is selected, you\u2019ll see a new button beneath it labeled Structure<\/strong>. This is similar to the Structure tab in ArcGIS Pro, where you can add effects to symbols and symbol layers<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2958948,"id":2958948,"title":"StylerEntry","filename":"StylerEntry.png","filesize":25335,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/animate-your-own-symbols-in-map-viewer\/stylerentry","alt":"","author":"5551","description":"","caption":"","name":"stylerentry","status":"inherit","uploaded_to":2958947,"date":"2026-03-02 18:21:33","modified":"2026-03-02 18:21:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":325,"height":501,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","medium-width":169,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","medium_large-width":325,"medium_large-height":501,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","large-width":325,"large-height":501,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","1536x1536-width":325,"1536x1536-height":501,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","2048x2048-width":325,"2048x2048-height":501,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry-302x465.png","card_image-width":302,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/StylerEntry.png","wide_image-width":325,"wide_image-height":501}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Clicking the Structure<\/strong> button displays the top-level symbol\u2014where you can add animations\u2014as well as the individual symbol layers, which also support animations.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2958949,"id":2958949,"title":"SymbolLayers","filename":"SymbolLayers.png","filesize":26756,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/animate-your-own-symbols-in-map-viewer\/symbollayers","alt":"","author":"5551","description":"","caption":"","name":"symbollayers","status":"inherit","uploaded_to":2958947,"date":"2026-03-02 18:22:04","modified":"2026-03-02 18:22:04","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":430,"height":536,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","medium-width":209,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","medium_large-width":430,"medium_large-height":536,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","large-width":430,"large-height":536,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","1536x1536-width":430,"1536x1536-height":536,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","2048x2048-width":430,"2048x2048-height":536,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers-373x465.png","card_image-width":373,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SymbolLayers.png","wide_image-width":430,"wide_image-height":536}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" To add an animation, click + Add Content<\/strong>, then choose the animation you want to apply to the symbol or a specific symbol layer. For this initial example, I\u2019m adding a Scale<\/strong> animation. This adjusts the symbol\u2019s size based on the scale factor set with the slider. Scale works particularly well when you anticipate changing symbol sizes, as it adjusts proportionally. In contrast, using Size<\/strong> would change the symbol from one fixed size to another.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2958952,"id":2958952,"title":"AddingSymbolAnimations","filename":"AddingSymbolAnimations.gif","filesize":5558953,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/animate-your-own-symbols-in-map-viewer\/addingsymbolanimations","alt":"","author":"5551","description":"","caption":"","name":"addingsymbolanimations","status":"inherit","uploaded_to":2958947,"date":"2026-03-02 18:31:42","modified":"2026-03-02 18:31:42","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":720,"height":545,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","medium-width":345,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","medium_large-width":720,"medium_large-height":545,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","large-width":720,"large-height":545,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","1536x1536-width":720,"1536x1536-height":545,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","2048x2048-width":720,"2048x2048-height":545,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations-614x465.gif","card_image-width":614,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingSymbolAnimations.gif","wide_image-width":720,"wide_image-height":545}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Adding animations to a multilayer symbol<\/strong><\/p>\n In this example, I\u2019m using a multilayer symbol to display beaches in Hawaii and their current rip current strength (high, medium, low). Using the same steps outlined above, you can access the Styler for all values or for a specific value within this style.<\/p>\n After opening the Structure view, I add a color animation to the \u201cHigh\u201d rip current symbol layer and configure the color transition properties. Next, I return to the Structure panel and add a top-level Scale animation. Because this animation is applied at the top level, it scales all symbol layers using the same scale factor<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2958953,"id":2958953,"title":"AddingAnimationsMultiLayer","filename":"AddingAnimationsMultiLayer.gif","filesize":7256880,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/animate-your-own-symbols-in-map-viewer\/addinganimationsmultilayer","alt":"","author":"5551","description":"","caption":"","name":"addinganimationsmultilayer","status":"inherit","uploaded_to":2958947,"date":"2026-03-02 18:33:30","modified":"2026-03-02 18:33:30","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":720,"height":545,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","medium-width":345,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","medium_large-width":720,"medium_large-height":545,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","large-width":720,"large-height":545,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","1536x1536-width":720,"1536x1536-height":545,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","2048x2048-width":720,"2048x2048-height":545,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer-614x465.gif","card_image-width":614,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/AddingAnimationsMultiLayer.gif","wide_image-width":720,"wide_image-height":545}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Adding an animation to a polygon<\/strong><\/p>\n For the final example, I\u2019ll demonstrate adding an animation to a polygon layer. In the current release, line and polygon symbols support color change and transparency animations.<\/p>\n In this example, I\u2019m working with active wildfire perimeters. The layer is styled with a vector polygon symbol, and I\u2019ve applied a bloom effect to give it a brighter appearance.<\/p>\n The animation controls for lines and polygons are located in the same place as they are for points. In the Structure view, I add a color animation at the top level of the symbol so both the stroke (outline) and the fill transition to the same color. In the animation settings, I experiment with the Random<\/strong> and Manual<\/strong> offset options. The Random effect creates a more dynamic, \u201calive\u201d appearance, while the Manual offset\u2014where all features animate simultaneously\u2014can produce a hypnotic effect when many features are visible.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2958961,"id":2958961,"title":"SmallerAnimation2","filename":"SmallerAnimation2.gif","filesize":32508971,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/animate-your-own-symbols-in-map-viewer\/smalleranimation2","alt":"","author":"5551","description":"","caption":"","name":"smalleranimation2","status":"inherit","uploaded_to":2958947,"date":"2026-03-02 19:14:06","modified":"2026-03-02 19:14:06","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":480,"height":401,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","medium-width":312,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","medium_large-width":480,"medium_large-height":401,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","large-width":480,"large-height":401,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","1536x1536-width":480,"1536x1536-height":401,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","2048x2048-width":480,"2048x2048-height":401,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","card_image-width":480,"card_image-height":401,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/03\/SmallerAnimation2.gif","wide_image-width":480,"wide_image-height":401}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"