vikingplugins

<p><strong>SVG AutoMotion</strong> makes it effortless to apply clean, performant animations to SVG graphics as they scroll into view — perfect for adding motion to brand logos, icons, and illustrations.</p>
<p><strong>Key features:</strong><br />
– Gutenberg block and shortcode support<br />
– Fade, rotate, scale, and slide effects<br />
– Adjustable animation duration<br />
– Lightweight, pure JavaScript (no dependencies)<br />
– Works with any SVG in your media library</p>
<h3>Usage</h3>
<h3>Using the Gutenberg Block</h3>
<ol>
<li>Add a new block and search for <strong>SVG AutoMotion</strong>.</li>
<li>Select your SVG image from the Media Library.</li>
<li>Choose which animations to apply and set the animation duration.</li>
<li>Save or preview your post to see the animation in action.</li>
</ol>
<p><em>See Screenshot 1 and Screenshot 2.</em></p>
<h3>Using the Shortcode</h3>
<p>You can also insert animations anywhere using the <code>[svg_automotion]</code> shortcode.</p>
<p>Basic example:</p>
<p>[svg_automotion src=”2025/10/automotionlogo.svg”]</p>
<p>You can combine multiple effects:</p>
<p>[svg_automotion src=”2025/10/automotionlogo.svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″]</p>
<p><strong>Parameters:</strong><br />
– <code>src</code> — relative or full URL path to your SVG file<br />
– <code>fade</code>, <code>rotate</code>, <code>scale</code>, <code>slide</code> — enable/disable each effect<br />
– <code>duration</code> — total animation time in milliseconds</p>


SVG AutoMotion

Animate any SVG image as it comes into view. Bring your logos, icons, and illustrations to life with simple, automatic animations.

David Perez

Sacra Jáimez

Alex Brea

manoloramos

Matías Quero

A. Mulero

Alejandro Castellón Martínez

mit2sumit

<p><strong>Container Edge Alignment for GenerateBlocks</strong><br />
Add custom controls to GenerateBlocks Container blocks to remove padding from the left or right side, creating edge-to-edge layouts. This feature only appears for containers using GeneratePress global max-width settings, perfect for creating asymmetric layouts where content extends to one browser edge while maintaining proper spacing on the other side.</p>
<p><strong>Carousel/Slider for GenerateBlocks Grid</strong><br />
We have added options to Gutenberg blocks that enable you to create a carousel or slider using your preferred blocks.</p>
<p>To start using the carousel, go to the grid block and select the ‘Carousel’ or ‘Slider’ option in the ‘FrontBlocks Grid Options’ section.</p>
<p>Carousel/Slider attributes:<br />
– Autoplay: automatically changes the slides after a certain amount of time (in seconds).<br />
– View: the number of items to display in the carousel/slider.<br />
Responsive view: the number of items to show in the carousel/slider in responsive view.<br />
– Buttons: the type of buttons to display in the carousel/slider (bullets, arrows or none).<br />
– Button colour: colour of the buttons.<br />
– Button background colour: background colour of the buttons (can be transparent).</p>
<p><strong>Enhanced WordPress native gallery</strong><br />
We have added options to the native WordPress gallery that allow you to create a different layout, such as grid or masonry, and also enable you to create a carousel with images that can be clicked on.</p>
<p><strong>Animations for Blocks</strong><br />
You can add animations to the blocks you want. To do this, go to the block settings and select the ‘FrontBlocks Animation Option’ section. There you will find a list of animations that you can apply to the block.</p>
<p>The animations are based on <a href="https://animate.style/" rel="nofollow ugc">Animate.css</a>: Attention seekers, Back entrances, Back exits, Bouncing entrances, Bouncing exits, Fading entrances, Fading exits, Flippers, Rotating entrances, Rotating exits, Specials, Zooming entrances, Zooming exits, and Sliding entrances.</p>
<p><strong>Container Effects</strong><br />
Apply glassmorphism effects to any block with customizable blur intensity. In the block settings, open the ‘Container Effects’ panel to enable the glass effect and adjust the blur level (0-50px) for a modern, frosted glass appearance. The effect includes a semi-transparent background, subtle border, and soft shadow, creating a beautiful layered design. Perfect for hero sections, cards, and overlays.</p>
<p><strong>Sticky option for Grid block:</strong><br />
The sticky option allows you to make the grid block stick to the top of the viewport when scrolling down. To use this feature, enable the “Sticky” option in the Grid block settings. When enabled, the grid block will remain fixed at the top of the viewport as you scroll down the page.</p>
<p><strong>Insert Post Block:</strong><br />
Display content from other posts, pages or custom post types. Search and select any published content to display its title as an H2 heading and its full content. This is perfect for creating dynamic content sections without duplicating content.</p>
<p><strong>Decoration for Headline block:</strong><br />
Add a decorative line to the Headline Block. You can choose between a vertical or horizontal line on the right.</p>
<p><strong>Product Categories block:</strong><br />
Display product categories from WooCommerce. Choose the number of categories to display, the order by and the order. You can also choose to hide empty categories. You can also select the number of columns in which to display the categories. You can also customise the background colour, border colour, border width, border radius, text colour, hover background colour, hover border colour and hover text colour.</p>
<p><strong>Counter Block:</strong><br />
Display a counter with a start value, end value and duration. The counter will increment from the start value to the end value within the specified time frame.</p>
<p><strong>Testimonials:</strong><br />
Display testimonials from other posts, pages or custom post types. Search and select any published content to display its title as an H2 heading and its full content. This is perfect for creating dynamic content sections without duplicating content.</p>
<p>Shortcode: [frontblocks_testimonials_carousel]</p>
<p><strong>Reading Time block:</strong><br />
Display the reading time of a post. You can choose the number of words per minute to use for the calculation.<br />
Shortcode: [frontblocks_reading_time]</p>
<p><strong>Reading Progress Bar:</strong><br />
Display a vertical progress bar on the right side of posts that fills up as users scroll through the content. The progress bar uses your website’s primary color and provides a visual indicator of reading progress. This feature can be enabled/disabled from the FrontBlocks settings page in the WordPress admin.</p>
<p><strong>Back Button:</strong><br />
Display a floating back button in the bottom left corner that allows users to navigate to the previous page. Enable it from the FrontBlocks settings page.</p>
<p><strong>Custom SVG Animations:</strong><br />
Add animated graphics to GenerateBlocks Shape blocks by importing JSON files. Supports two formats that are automatically detected: <strong>Lottie/Bodymovin</strong> (import JSON from After Effects or LottieFiles.com) and <strong>Custom CSS</strong> (SVG + @keyframes).</p>
<p><strong>Gravity Forms Inline Layout:</strong><br />
Display Gravity Forms with fields and buttons on the same line. Perfect for newsletter signup forms (email + subscribe button) or search forms (input + search button).</p>
<p>To use this feature:<br />
1. Select a form in the Gravity Forms block<br />
2. Find the “FrontBlocks Gravity Form Options” panel in the block settings where you can:<br />
   – Enable inline layout with a simple toggle<br />
   – Adjust the gap between elements (0-50px)<br />
   – Responsive design: automatically stacks on mobile devices</p>
<p>This feature eliminates the need for custom CSS to achieve inline form layouts.</p>
<p><strong>WooCommerce Features:</strong><br />
Included features for WooCommerce FrontBlocks PRO.</p>
<p><strong>FrontBlocks PRO:</strong><br />
FrontBlocks PRO is a premium plugin that extends the functionality of FrontBlocks. It includes additional features and improvements over the free version.</p>
<p>Features:<br />
– Enable Gutenberg in the product editor.<br />
– Enable simple prices for variable products.<br />
– Block added after button.<br />
– Product description behaviour.<br />
– Disable zoom on product image.<br />
– Share buttons.<br />
– Custom Post Types Builder: Create and manage custom post types with advanced configuration options:<br />
  * Create custom post types with a simple interface from the FrontBlocks settings page<br />
  * Configure post type behavior (Post or Page style – hierarchical or not)<br />
  * Enable/disable categories taxonomy for each custom post type<br />
  * Add custom meta fields with multiple field types (Text, Textarea, URL, Date, File, Number, Email)<br />
  * Individual settings page for each custom post type accessible from the post type menu<br />
  * Delete custom post types easily with a single click<br />
– Disable tabs on the product page.<br />
– Horizontal product form layout (price, quantity, and add to cart button in one row).</p>
<p>More information in the <a href="https://close.technology/en/wordpress-plugins/frontblocks-pro/?utm_source=WordPressORGReadme&utm_medium=link&utm_campaign=frontblocks" rel="nofollow ugc">FrontBlocks PRO</a> page.</p>
<h3>1.3.1</h3>
<ul>
<li>Improved: Custom SVG Animations now uses file upload instead of textarea for importing JSON files.</li>
<li>Added: Download example JSON button for Custom SVG Animations feature.</li>
<li>Added: Clear button to remove imported animation files.</li>
<li>Added: Visual file name display with icon for imported JSON files.</li>
<li>Improved: Better user experience with file import workflow for Shape animations.</li>
<li>Fixed: File input now properly resets after clearing, allowing immediate re-import of files.</li>
</ul>
<h3>1.3.0</h3>
<ul>
<li>Added: Container Effects with Glass Effect (Glassmorphism) – Apply customizable glass effect with adjustable blur intensity (0-50px) to any block.</li>
<li>Improved: Complete redesign of the Settings page with modern card-based layout.</li>
<li>Improved: Each feature now displays in its own card with icon, title, and toggle switch.</li>
<li>Improved: PRO features show distinctive badge in the top-left corner.</li>
<li>Improved: Responsive grid layout that adapts to mobile, tablet, and desktop screens.</li>
<li>Improved: License section displays as full-width card for better visibility.</li>
<li>Added: Container Edge Alignment – Remove padding from left or right side of GenerateBlocks containers to create asymmetric edge-to-edge layouts (only for containers using GeneratePress global max-width).</li>
<li>Added: Custom Animations for Shapes – Full Lottie/Bodymovin support + custom CSS animations via JSON. Auto-detects format.</li>
<li>Added: Lottie-web library integration for After Effects animations.</li>
<li>Added: Gravity Forms Inline Layout option for displaying fields and buttons on the same line.</li>
<li>Added: Gap control for inline form elements (0-50px).</li>
<li>Added: Responsive design support – automatically stacks on mobile.</li>
<li>Fixed: REST API validation errors with custom block attributes.</li>
<li>Added: Reading Progress Bar – Display a visual progress indicator on the right side of posts as users scroll through content.</li>
<li>Added: Back Button feature with floating button to navigate to previous page.</li>
<li>PRO: Horizontal Product Form Layout – Align price, quantity, and add to cart button in one row.</li>
<li>Added: Remove box shadow in Carrusel bullets.</li>
</ul>
<h3>1.2.1</h3>
<ul>
<li>Fixed: Carousel/Slider not working correctly.</li>
</ul>
<h3>1.2.0</h3>
<ul>
<li>Improved: Settings page.</li>
<li>Added: Toggle to disable animations on mobile.</li>
<li>PRO: Deactivate Product Tabs setting.</li>
<li>PRO: Share buttons.</li>
<li>PRO: Zoom disable in Product Image.</li>
<li>PRO: Product description behavior.</li>
<li>PRO: Block after buttom.</li>
<li>PRO: Simple Prices for variable products.</li>
</ul>
<h4>1.1.0</h4>
<ul>
<li>Added: FrontBlocks PRO compatibility.</li>
<li>Added: Show a preview of the product categories in Gutenberg editor.</li>
<li>Fixed: Change bullets logic count up to 10 items.</li>
<li>Added: New block for reading time of a post.</li>
<li>Added: Carousel/Slider: Add item to view in laptop and mobile.</li>
<li>Added: Carousel/Slider: Add option to deactivate Carousel/Slider in Desktop.</li>
<li>Fixed: Mansonry effect upgraded in Gallery.</li>
<li>Fixed: translations in block options.</li>
</ul>
<h4>1.0.4</h4>
<ul>
<li>Added: Product Categories block.</li>
<li>Added: Options to the Product Categories block.</li>
<li>Added: Counter effect for Headline block.</li>
<li>Added: Counter attribute for Headline block.</li>
<li>Added: Add decoration attribute for Headline block.</li>
</ul>
<h4>1.0.3</h4>
<ul>
<li>Added: Settings page and simple testimonials feature.</li>
<li>Fixed: interaction with Gravity Forms.</li>
<li>Fixed: not rendering correctly the content of the insert post block.</li>
</ul>
<h4>1.0.1 & 1.0.2</h4>
<ul>
<li>Fixed: options for carousel/slider not showing.</li>
</ul>
<h4>1.0.0</h4>
<ul>
<li>Added sticked option for Grid block.</li>
<li>Improved interface for animations.</li>
<li>Improved interface for carousel/slider.</li>
<li>Added options in native gallery block.</li>
<li>Added: Insert Post block to display content from other posts, pages, or custom post types.</li>
</ul>
<h4>0.2.5</h4>
<ul>
<li>Update version.</li>
</ul>
<h4>0.2.4</h4>
<ul>
<li>Fixed: Buttons not overlapping the carousel.</li>
<li>Added: New data attribute for carousel buttons color.</li>
<li>Added: Not show bullets in responsive view and more than 5 items.</li>
</ul>
<h4>0.2.3</h4>
<ul>
<li>Updated Glide autoplay value assignation.</li>
</ul>
<h4>0.2.2</h4>
<ul>
<li>Updated images.</li>
</ul>
<h4>0.2.1</h4>
<ul>
<li>New image for WordPress Plugin.</li>
</ul>
<h4>0.2.0</h4>
<ul>
<li>Created Animation feature.</li>
</ul>
<h4>0.1.0</h4>
<ul>
<li>Created Carousel/Slider class block.</li>
<li>First released.</li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="https://close.marketing/" rel="nofollow ugc">Closemarketing</a></li>
<li><a href="https://close.technology/" rel="nofollow ugc">Close·Technology</a></li>
</ul>


FrontBlocks for GeneratePress

This plugin extends the functionality of GeneratePress by adding a carousel, slider, animations, sticky columns, edge alignment for containers and the …

SVG AutoMotion vs FrontBlocks for GeneratePress