Themeisle

Hardeep Asrani

mariamunteanu1

Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.
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.
All the code and sources for this plugin are publicly available as part of https://github.com/Codeinwp/otter-blocks.

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.

adriankremer

Page Slideshow is a clean plugin with which you can create a slideshow for every web page. Simply choose your desired images in the WordPressStyle media library via the Drag and Drop method and design your own individual slideshow. This plugin also supports texts and headlines and uses the responsive <a href="http://www.woothemes.com/flexslider/" rel="nofollow ugc">Flexslider</a> provided by Woothemes.
Features
After having successfully installed Page Slideshow, the plugin offers different options to create and edit your slideshow. Within the settings, you will find the following options:
<ul>
<li>
Position: Determines when the slideshow will be created. It can either be placed before the actual content or after it
</li>
<li>
Animation: The slideshow’s animation option regulates in which style the slideshow switches from one slide to the other. You can choose between a ‘Fade’ mode, which generates an alpha effect and a ‘Slide’ mode that creates a flowing transition
</li>
<li>
Navigation: You can choose between two different methods with which to navigate your slideshow:
<ol>
<li>With the help of navigation points, which are visibly displayed as dots on the bottom of the slides and can be used to navigate between slides</li>
<li>By using the navigation arrows that appear on each side of the slideshow during a mouseover</li>
</ol>
Both of these methods can be displayed simultaneously
</li>
<li>
Image size: The chosen image size affects the maximum solution of the slideshow images
</li>
</ul>
Creation
Once you have installed and activated the plugin, a new slideshow section will be generated on the bottom half of the content part on every available web page. Here you will find a ‘+’ (plus) button that calls for you to choose or to upload an image. Once you have picked the desired image, it can be inserted into the slideshow range using the ‘Use Image’ button. Afterwards the chosen image appears in a box with the option to add text. The slideshow will be shown on the respective web page.
<ul>
<li>
The slides can be arranged as may be required by dragging them to their desired position via Drag and Drop.
</li>
<li>
The slideshow’s layout automatically adjusts to the conditions of the terminal device owing to a responsive web design.
</li>
</ul>

Page slideshow

With Page Slideshow you can create individual, responsive and sortable slideshows. Uses performance-friendly CSS3 transitions.

Blocks Animation: CSS Animations for Gutenberg Blocks vs Page slideshow