Djordje Arsenovic

<p>The plugin creates custom block called Typewriter. To that block you can add some text, which will appear on the fronted as it was typed out on the<br />
old fashioned typewriter machine.</p>
<p>You can have multiple Typed out elements on the single page or post, or custom post.</p>
<h3>Basic Usage</h3>
<p>Go to the page where you want to add the Typewriter block, after that add new block and find the Typewriter block in the list. When you add it, add some text to the block, save the page and that’s it. You will see the typewrite effect.</p>
<h3>Settings</h3>
<p>1) Curosr – What would you like to appear as cursor for example you can use the pipe character (|) or underscore (_) or something else.<br />
2) Element type – Which tag you should see on the front-end available options: H1 – H6, paragraph, span<br />
3) Loop – Check this checkbox if you want the typing effect to repeat<br />
4) Typing Delay – The delay between each key when typing. By default it’s natural. The higher the delay value the slower the typing speed will be. (0 means natural typing speed).</p>
<h3>Custom developer settings</h3>
<p>This plugin was built by developers for developers in mind that would like to extend the plugin functionality. So both cursor and the wrapper element can have their custom class which you can use in the theme css or where you want.<br />
1) Cursor CSS class<br />
2) Wrapper CSS class</p>
<h3>Words Settings</h3>
<p>Words panel in the block options is a special feature of the plugin where you can add some words which will be deleted and typed one by one. Checkout screenshots for easier understanding.</p>
<p>This can be done by it’s own or in combination with the text from the post.</p>
<p>For example:<br />
In the post and typewriter block add some spaces and then in the words section add: Pancakes, PopCorn, Chocolate<br />
Only those words will replace each other.</p>
<p>Or another example you could add a text in the Typewriter element:<br />
“I like ” and same words in the words section of the block settings then those words will replace each other but with the prefix of I like.</p>


Typewriter block

Block that uses css animation to make the text appears like it was written on the old-fashioned typewriter machine

Themeisle

Hardeep Asrani

mariamunteanu1

<p>Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.</p>
<p>The UI for Blocks Animation feels so native and intuitive, you won’t even notice it’s installed. Just install, and you will see animation settings in all the blocks, right in the Block Settings Sidebar.</p>
<p>All the code and sources for this plugin are publicly available as part of https://github.com/Codeinwp/otter-blocks.</p>


Blocks Animation: CSS Animations for Gutenberg Blocks

Basically works very well and is elegantly integrated. But you have to do a lot of clicks to change loading animation for instance. there are 3 accordions you constantly have to open/close and inside it is kind of context menu so you get kind of lost. And when you edit a page you can not see on the first sight which elements have an animation added. Would be nice to have an indicator for that like an outline or an icon appended to the block.

works good but UI needs improvements


The perfect complement to bring life to the elements of my website.


My favorite animation tool


Adds professional animations to your website!Easy to use


Simply super

Add CSS animations and scroll effects to any Gutenberg block. Choose from fade, slide, zoom & more, with delay and duration controls — no code needed.

Typewriter block vs Blocks Animation: CSS Animations for Gutenberg Blocks