{"id":258476,"date":"2025-10-30T14:13:58","date_gmt":"2025-10-30T14:13:58","guid":{"rendered":"https:\/\/en-gb.wordpress.org\/plugins\/easy-animate\/"},"modified":"2025-12-15T14:19:18","modified_gmt":"2025-12-15T14:19:18","slug":"svg-automotion","status":"publish","type":"plugin","link":"https:\/\/si.wordpress.org\/plugins\/svg-automotion\/","author":23391543,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.0","stable_tag":"1.1.0","tested":"6.9.4","requires":"6.0","requires_php":"","requires_plugins":null,"header_name":"SVG AutoMotion","header_author":"Viking Plugins","header_description":"Automatically animate any svg image. Bring your logos, icons, and illustrations to life with customizable on-scroll animations.","assets_banners_color":"cccccd","last_updated":"2025-12-15 14:19:18","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/viking.infy.uk\/","rating":5,"author_block_rating":0,"active_installs":0,"downloads":227,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"vikingplugins","date":"2025-12-03 12:12:02"},"1.1.0":{"tag":"1.1.0","author":"vikingplugins","date":"2025-12-15 14:19:18"}},"upgrade_notice":{"1.0.0":"

Initial release.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3420282,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3420282,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3420285,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3420285,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":{"screenshot-2.png":{"filename":"screenshot-2.png","revision":3420285,"resolution":"2","location":"plugin"},"screenshot-1.png":{"filename":"screenshot-1.png","revision":3420285,"resolution":"1","location":"plugin"}},"screenshots":{"1":"Adding an SVG AutoMotion Block","2":"The SVG AutoMotion Settings"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[785,4035,2904],"plugin_category":[50],"plugin_contributors":[249992],"plugin_business_model":[],"class_list":["post-258476","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-lightweight","plugin_tags-svg","plugin_category-media","plugin_contributors-vikingplugins","plugin_committers-vikingplugins"],"banners":{"banner":"https:\/\/ps.w.org\/svg-automotion\/assets\/banner-772x250.png?rev=3420285","banner_2x":"https:\/\/ps.w.org\/svg-automotion\/assets\/banner-1544x500.png?rev=3420285","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/svg-automotion\/assets\/icon-128x128.png?rev=3420282","icon_2x":"https:\/\/ps.w.org\/svg-automotion\/assets\/icon-256x256.png?rev=3420282","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/svg-automotion\/trunk\/screenshot-1.png?rev=3420285","caption":"Adding an SVG AutoMotion Block"},{"src":"https:\/\/ps.w.org\/svg-automotion\/trunk\/screenshot-2.png?rev=3420285","caption":"The SVG AutoMotion Settings"}],"raw_content":"\n

SVG AutoMotion<\/strong> makes it effortless to apply clean, performant animations to SVG graphics as they scroll into view \u2014 perfect for adding motion to brand logos, icons, and illustrations.<\/p>\n\n

See examples at viking.infy.uk\/svg-automotion<\/a><\/p>\n\n

Key features:<\/strong>\n- Gutenberg block and shortcode support\n- Fade, rotate, scale, and slide effects\n- Adjustable animation duration\n- Lightweight, pure JavaScript (no dependencies)\n- Works with any SVG in your media library\n- Add a link to the image if needed<\/p>\n\n

Usage<\/h3>\n\n

Using the Gutenberg Block<\/h3>\n\n
    \n
  1. Add a new block and search for SVG AutoMotion<\/strong>.<\/li>\n
  2. Select your SVG image from the Media Library.<\/li>\n
  3. Choose which animations to apply and set the animation duration.<\/li>\n
  4. Add a link to the image if needed under link settings<\/li>\n
  5. Save or preview your post to see the animation in action.<\/li>\n<\/ol>\n\n

    See Screenshot 1 and Screenshot 2.<\/em><\/p>\n\n

    Using the Shortcode<\/h3>\n\n

    You can also insert animations anywhere using the [svg_automotion]<\/code> shortcode.<\/p>\n\n

    Basic example:<\/p>\n\n

    [svg_automotion src=\"2025\/10\/automotionlogo.svg\"]<\/p>\n\n

    You can combine multiple effects:<\/p>\n\n

    [svg_automotion src=\"2025\/10\/automotionlogo.svg\" fade=\"true\" slide=\"true\" rotate=\"false\" scale=\"true\" duration=\"4000\"]<\/p>\n\n

    You can also add a link to the shortcode \n[svg_automotion src=\"2025\/10\/automotionlogo.svg\" fade=\"true\" slide=\"true\" rotate=\"false\" scale=\"true\" duration=\"4000\" link_url=\"https:\/\/wordpress.org\" link_newtab=\"true\" ]<\/p>\n\n

    Parameters:<\/strong>\n- src<\/code> \u2014 relative or full URL path to your SVG file\n- fade<\/code>, rotate<\/code>, scale<\/code>, slide<\/code> \u2014 enable\/disable each effect\n- duration<\/code> \u2014 total animation time in milliseconds\n- link_url<\/code> \u2014 url to link to (optional)\n- link_newtab<\/code> \u2014 set to true if you wish the link to open in a new tab<\/p>\n\n\n

      \n
    1. Upload the plugin files to the \/wp-content\/plugins\/svg-automotion\/<\/code> directory, or install through the WordPress plugin screen.<\/li>\n
    2. Activate the plugin through the Plugins<\/strong> menu in WordPress.<\/li>\n
    3. Add an SVG AutoMotion block or use the [svg_automotion]<\/code> shortcode.<\/li>\n<\/ol>\n\n\n
      \n

      How do I upload SVG files into my media library?<\/h3><\/dt>\n

      If you haven\u2019t yet, install a plugin that allows SVG uploads such as \u201cSVG Support\u201d.<\/p><\/dd>\n

      Does it work with any SVG file?<\/h3><\/dt>\n

      Yes, as long as the SVG structure is valid.<\/p><\/dd>\n

      Can I control which animations run?<\/h3><\/dt>\n

      Yes. You can toggle fade, rotate, scale, and slide animations from the block settings.<\/p><\/dd>\n

      Will it slow down my site?<\/h3><\/dt>\n

      No. The script is tiny, loads only when needed, and animations trigger only when visible.<\/p><\/dd>\n

      What sets the order of the animation?<\/h3><\/dt>\n

      The animation applies to image elements in the order they appear in the SVG layers.<\/p><\/dd>\n\n<\/dl>\n\n\n

      1.1.0<\/h4>\n\n
        \n
      • Added ability to add a link <\/li>\n
      • Removed unwanted pause in animation when gradients are defined in the SVG file<\/li>\n<\/ul>\n\n

        1.0.0<\/h4>\n\n
          \n
        • Initial release with Gutenberg block and shortcode support.<\/li>\n<\/ul>","raw_excerpt":"Animate any SVG image as it comes into view. Bring your logos, icons, and illustrations to life with simple, automatic animations.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/258476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=258476"}],"author":[{"embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/vikingplugins"}],"wp:attachment":[{"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=258476"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=258476"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=258476"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=258476"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=258476"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/si.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=258476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}