Valentin Grenier

<p>Simple block animations adds scroll-triggered animations to WordPress Gutenberg blocks without any coding required.</p>
<p><strong>Features:</strong></p>
<ul>
<li>5 animation types (fade, slide up/down/left/right)</li>
<li>Customizable duration and delay</li>
<li>Works with all blocks (core, third-party, and custom blocks)</li>
<li>Lightweight (CSS + Intersection Observer)</li>
<li>No jQuery or heavy libraries</li>
<li>Accessibility-friendly (respects prefers-reduced-motion)</li>
</ul>
<p><strong>Supported Blocks:</strong></p>
<p>Works with all WordPress blocks, including core blocks, third-party blocks, and custom blocks.</p>
<p><strong>Development:</strong></p>
<p>The source code for this plugin is available on GitHub: https://github.com/valentin-grenier/simple-animations-for-gutenberg</p>
<p>The plugin uses npm and webpack to compile JavaScript and CSS files. Source files are located in the <code>src/</code> directory, and compiled files are in the <code>build/</code> directory.</p>
<p>To build from source:<br />
1. Install dependencies: <code>npm install</code><br />
2. Build for production: <code>npm run build</code><br />
3. Build for development: <code>npm run dev</code></p>


Simple Block Animations

Add beautiful scroll-triggered animations to any Gutenberg block with a simple, lightweight solution.

dashed-slug.net

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/rMM3Nft5-mQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-wordpress-plugin" rel="nofollow ugc">SVG Logo and Text Effects</a> (or SLATE for short)<br />
is a WordPress plugin by <a href="http://dashed-slug.net" rel="nofollow ugc">dashed-slug</a><br />
that helps you produce visually stunning text effects using<br />
<em><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-wordpress-plugin/svg-shortcodes-tutorial" rel="nofollow ugc">SVG shortcodes</a></em>.</p>
<p>Use it to reinforce a brand identity, visually enhance your calls-to-action, or simply be more artistic,<br />
with <a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics" rel="nofollow ugc">SVG</a> text that you can edit at any time.<br />
All this, without the need to resort to any image-editing software.</p>
<p>You can mix and match <strong>fonts</strong>, <strong>colors</strong>, <strong>fill patterns</strong>, and <strong>filters</strong><br />
to create unique text effects that draw attention to your content.</p>
<h4>easy SVG text</h4>
<p>Use <strong>shortcodes</strong> to insert fancy, eye catching, <strong>editable</strong> and <strong>SEO-friendly</strong> text into your posts, pages or custom content.</p>
<h4>fonts</h4>
<p>Out of the box, <strong>SVG Logo and Title Effects</strong> comes with <strong>Google fonts</strong> support. You may extend your font library with <strong>font files</strong> that you install yourself.</p>
<h4>fill patterns</h4>
<p>Letters are filled with a <strong>fill pattern</strong> of your choice. Fill patterns have parameters. Control various sizes, distances and colors to produce unique variations, or let the defaults work for you.</p>
<h4>filter effects</h4>
<p>Easily pass your SVG text through filter effects such as the built-in <strong>glow</strong> and <strong>drop shadow</strong> effects, or any other filter that you install via plugins.</p>
<h4>presets</h4>
<p>Save time and use <strong>ready-made presets</strong> to style your SVG text. Then you can tweak the text settings to your liking.</p>
<h4>extensible</h4>
<p>Download or create <strong>plugins</strong> that let you use additional fonts, vector shapes, filter effects, fill patterns, and presets.</p>
<h4>caching</h4>
<p>SVG text that has already been rendered once is subsequently loaded from a DB cache, for maximal performance. <strong>No compromises on page load speed!</strong></p>
<h4>safe fallbacks</h4>
<p>Old browsers that don’t support SVG rendering will fallback to the closest HTML equivalent. <strong>Your text will be displayed no matter what!</strong></p>
<h4>documentation</h4>
<p>Every release comes with <strong>PDF documents</strong> covering more than you will ever want to know about this plugin.</p>
<p><strong>To get the documentation, navigate to the <a href="https://www.dashed-slug.net/downloads/" rel="nofollow ugc">dashed-slug download area</a><br />
and make sure to get the <em>bundle</em> release.</strong></p>
<h4>registered dashed-slug.net member? enjoy extra features!</h4>
<ul>
<li><strong><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-extensions/more-shapes-extension/" rel="nofollow ugc">More Shapes extension</a>:</strong><br />
Extends the WordPress SLATE plugin to add more SVG shapes. Shapes are essentially SVG templates that allow more complex text effects.</li>
<li><strong><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-extensions/visual-composer-integration-extension/" rel="nofollow ugc">WPBakery Page Builder Integration extension</a>:</strong><br />
If you have <strong><a href="http://www.codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431?ref=dashed-slug" title="This affiliate link supports the development of dashed-slug.net plugins. Thanks for clicking." rel="nofollow ugc">WPBakery Page Builder</a></strong><br />
from <strong>wpbakery</strong> installed, you can avoid writing shortcodes altogether. Tweak your SVG text via a friendly graphical interface when you install VC integration.</li>
<li><strong><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-extensions/titles-replacement-extension/" rel="nofollow ugc">Site & Page Titles Replacement extension</a>:</strong><br />
With most themes you will be able to easily apply SVG text effects to the <strong>site title</strong> or the <strong>page/post titles</strong> when you install this plugin.</li>
<li><strong><a href="https://www.dashed-slug.net/svg-logo-and-text-effects-extensions/raster-fallbacks-extension/" rel="nofollow ugc">Raster Fallbacks extension</a>:</strong><br />
Don’t settle for HTML fallback in legacy browsers. When you install this plugin, your SVG text is automatically rendered to <strong>cached PNG image fallbacks</strong>. Fallbacks are shown whenever SVG cannot be rendered for any reason.</li>
</ul>
<h4>follow the slime</h4>
<p>The dashed-slug is a social slug:</p>
<ul>
<li>Facebook: <a href="https://www.facebook.com/dashedslug" rel="nofollow ugc">https://www.facebook.com/dashedslug</a></li>
<li>Google+: <a href="https://plus.google.com/103549774963556626441" rel="nofollow ugc">https://plus.google.com/103549774963556626441</a></li>
<li>RSS feed: <a href="https://www.dashed-slug.net/category/news/feed" rel="nofollow ugc">https://www.dashed-slug.net/category/news/feed</a></li>
<li>Youtube channel: <a href="https://www.youtube.com/channel/UCZ1XhSSWnzvB2B_-Cy1tTjA" rel="nofollow ugc">https://www.youtube.com/channel/UCZ1XhSSWnzvB2B_-Cy1tTjA</a></li>
</ul>
<h3>Donating</h3>
<p>This is a free plugin.</p>
<p>If you wish, you may show your support by donating.</p>
<p>Donating helps the dashed-slug to design, develop, test, release and support more quality WordPress plugins.</p>
<h4>via flattr</h4>
<p><a href="https://flattr.com/profile/dashed-slug" rel="nofollow ugc">flattr the dashed-slug</a></p>
<h4>via bitcoin</h4>
<p><a href="1DaShEDyeAwEc4snWq14hz5EBQXeHrVBxy?dashed-slug?message=donation" rel="nofollow ugc">send bitcoins to 1DaShEDyeAwEc4snWq14hz5EBQXeHrVBxy</a></p>


SVG Logo and Text Effects

Insert text with visually stunning SVG effects into your WordPress site.

Simple Block Animations vs SVG Logo and Text Effects