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

Blocks Animation allows you to add CSS Animations to all of your Gutenberg blocks in the most elegant way.

codepeople

Loading Page with Loading Screen features:
→ Displays a screen showing loading percentage of a given page 
→ Includes multiple loading screen alternatives (Bar, Logo, and Text) you can choose from the plugin settings page 
→ Displays the page’s content with an animation after complete the loading process 
→ Increase the WordPress performance 
→ Allows to select the colors of the loading progress screen, 
→ As background colors and images 
→ Allows to display or remove the text showing the loading percentage 
→ Pre-loads the page images
Loading Page with Loading Screen plugin performs a pre-loading of image on your website and displays a loading progress screen with percentage of completion. Once everything is loaded, the screen disappears.
More about the Main Features:
<ul>
<li>Displays a screen showing loading percentage of a given page. In heavy pages the “Loading Page with Loading Screen” plugin allows to know when the page appearance is ready.</li>
<li>Allows to display the loading screen on homepage only, or in all pages of website.</li>
<li>Allows to select the colors of the loading progress screen, or select images as background. By default the colour of loading screen is black, but it may be modified to adjust the look and feel of the loading screen with website’s design.</li>
<li>Allows to display or remove the text showing the loading percentage.</li>
</ul>
The base plugin, available for free from the WordPress Plugin Directory, has all the features you need to displays an loading screen on your website.
Premium Features:
<ul>
<li>Allows to choose a loading progress screen. The premium version of plugin includes additional loading screens not available in the free version.</li>
<li>Allows to select from multiple possible animations, to display the page’s content after complete the loading process.</li>
<li>Improves the page performance.</li>
<li>Lazy Loading feature allows to load faster and reduce the bandwidth consumption. The images are big consumers of bandwidth and loading time, so a WordPress website with multiple images can improve its performance and reduce the loading time with the lazy loading feature.</li>
<li>Allows to select an image as a placeholder, to replace the real images during pre-loading. It’s recommended to select the lighter images possible to increase the WordPress performance, the image selected will be used instead of the original images, in the loading page process.</li>
</ul>
Demo of Premium Version of Plugin
<a href="https://demos.dwbooster.com/loading-page/wp-login.php" title="Click to access the Administration Area demo" rel="nofollow ugc">https://demos.dwbooster.com/loading-page/wp-login.php</a>
<a href="https://demos.dwbooster.com/loading-page/" title="Click to access the Public Page" rel="nofollow ugc">https://demos.dwbooster.com/loading-page/</a>
What is Lazy Loading?
Lazy Loading means that the original images are not loaded until finalize the loading of page. This action improves the download speed of webpages.
If you want more information about this plugin or another one don’t doubt to visit my website:
<a href="http://wordpress.dwbooster.com" title="CodePeople WordPress Repository" rel="nofollow ugc">http://wordpress.dwbooster.com</a>
<h3>Interface</h3>
To use Loading Page with Loading Screen on your website, simply activate the plugin. If you wish to modify any of the default options, go to the plugin’s Settings. They can be found either by going to Settings > Loading Page on your WordPress dashboard, or by going to Plugins; a link to Settings can be found in the plugin description.
The Loading Page with Loading Screen setup is divided in two sections: the first one is dedicated to the activation and setup of the loading screen, and the second to the delayed loading of the images that are not shown immediately ( images that require on-page scrolling in order to be seen).
Loading Screen Setup
The setup options for the loading screen are:
<ul>
<li>Enable loading screen: activates preloading of images and displays a loading screen while the webpage is loading.</li>
<li>Display the loading screen once per session: display the loading screen only once per session.</li>
<li>Display the loading screen on: display the loading screen with all screens sizes, or if the screens sizes satisfy the conditions.</li>
<li>Display loading screen only in: displays a loading screen only on homepage, all pages, or specific pages or posts. In the last case the IDs of pages or posts should be separated by comma symbol “,”</li>
<li>Devices: Allows selecting the devices where to show the loading screens (Desktop, Mobile, or Both).</li>
<li>Exclude the loading screen from: excludes the loading screen from pages or posts whose IDs are entered separated by comma symbol “,”</li>
<li>Select the loading screen: allows to choose a loading screen. The premium version of plugin include multiple loading screens.</li>
<li>Select background color: allows to select the background color for your loading screen compatible with the design guidelines of your website.</li>
<li>Select images as background: allows to display an image as loading screen background, the image can be displayed tiled or centered.</li>
<li>Display image in fullscreen: allows to adjust the background image in fullscreen mode.</li>
<li>Select foreground color: Allows to select the color of the graphics and texts that display the loading progress information.</li>
<li>Additional seconds: Allows to add seconds before remove the loading screen at the end of the load process.</li>
<li>Include an ad, or your own block of code: Allows to add ads, or other block of code, to the loading screen.</li>
<li>Apply the effect on page: Display the page’s content with an animation after complete the loading process.</li>
<li>
Display loading percent: Shows the percentage of loading. The loading percent is calculated in function of images in the page.
</li>
<li>
Troubleshoot Area – Loading Screen: allows disabling/enabling the search in deep.
</li>
</ul>
Lazy Loading Setup (in premium version only)
The options to set up Lazy Loading and increase the WordPress performance are:
<ul>
<li>Enable lazy loading: Enables the delayed loading of images outside of the current viewing area of the user improving the rendering time of complete page.</li>
<li>
Select the image to load by default: Choose an image to be shown as a placeholder of the actual images, the loading of which will be delayed. It’s recommended the selection of a light image to increase the WordPress performance.
</li>
<li>
Troubleshoot Area – Lazy Loading: allows entering some texts to exclude the images tags with the entered texts in the classes or attributes.
</li>
</ul>

Loading Page with Loading Screen

Loading Page with Loading Screen plugin performs a pre-loading of images on your website and displays a loading progress screen with percentage of com …

Blocks Animation: CSS Animations for Gutenberg Blocks vs Loading Page with Loading Screen