Animations widget

[lexoyo]

It is really easy to make things appear with an animation - images, texts, html boxes, containers. The available animations can be seen in action here.

First open SIlex.me in a browser, then create a new website and save it in a folder.

In this same folder, create a folder named "css".

Then download this file and place it in this "css" folder.

Back to Silex, open the HTML head editor (in the menu "< />") and paste this code anywhere.

<link href="./css/animate.min.css" rel="stylesheet">

It should look like this:

Then open the CSS script editor (in the menu "< />") and paste this code anywhere.

/* for firefox */
.paged-element-hidden.animated{
    animation-name: none !important;
}
/* */

Select an element and look at the properties tab, in "style" section, add the CSS classes animate__animated animate__fadeIn to the center of the section.

Then save the website and click the "eye" to preview it in a new window. You will see the fade in effect on the element.

You can also replace "animate__fadeIn" by one of many css classes to change the animation. You need to always keep the "animate__animated" css class.

Open this website and choose an animations. Then copy an animation "css classe" with the "copy" icon on the right and replace animate__fadeIn with this new css class. You need to always keep the "animate__animated" css class.

[ceubri]

great !

[lexoyo]

@superwup has a template which shows all of them in Silex
Maybe we should share it

[ceubri]

miam miam ;)

[lexoyo]

I just updated this widget with the latest version of animate.css