How to create some animations in layers?

Asked on August 25, 2015 in Customization.

Hi
I want to build some animations in my layers Website. How can i do that ?

Reply
3 Answer(s)
Answered on August 27, 2015.

Hi there,

There are several wonderful Extensions that add animations for the content widget and so on. Here are a few:

Advanced Animated Content
Woosh Slider
Animated Columns
Layers Plus Addons
Gallery Mojo
Layers Essential Addons
Animated Content 

You also have the option of using just CSS to animate elements via transforms and other no-Javascript techniques in Custom CSS. Here is a great archive of CSS animations you can apply to any element in your pages:
https://css-tricks.com/search-results/?q=animations

There are also several child themes that include front-end animation. The main difference is you have more control over the animating when using Extensions

Thank you for that information you article
kiss manga

5 days ago.
Reply
Answered on August 27, 2015.

There’s also animate.css and wow.js which you can add on your child theme’s functions.php using this code if you don’t want to buy extensions:

//* Enqueue Animate.CSS and WOW.js
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {

wp_enqueue_style( ‘animate’, get_stylesheet_directory_uri() . ‘/assets/css/animate.min.css’ );

wp_enqueue_script( ‘wow’, get_stylesheet_directory_uri() . ‘/assets/js/wow.min.js’, array(), ”, true );

Then go to your customiser and on advanced settings put the custom classes you want for your transition. You can find the classes for each transition here https://daneden.github.io/animate.css/

You just simply add the widget, then go to Advanced – Custom Class(es) and add the code like this –

wow slideInUp

remember to download and add animate.min.css and wow.min,js files in your child theme’s assets folder.

Reply
Answered on February 1, 2016.

Thanks Daniel Bandi.
I used this code, added to functions.php in child theme:

 //* Enqueue Animate.CSS and WOW.js
 // https://daneden.github.io/animate.css/
 // https://github.com/matthieua/WOW
 add_action( 'wp_enqueue_scripts', 'animate_enqueue_scripts' );
 function animate_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/assets/css/animate.min.css' );
 wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/assets/js/wow.min.js', array(), '', true );
}
//* Enqueue script to activate WOW.js
 function sk_wow_init_in_footer() {
 add_action( 'print_footer_scripts', 'wow_init' );
 }
//* Add JavaScript before </body>
 function wow_init() { ?>
 <script type="text/javascript">
 wow = new WOW(
 {
 //boxClass:     'wow',      // default
 //animateClass: 'animated', // default
 offset:       100,          // default
 //mobile:       true,       // default
 //live:         true        // default
 }
 )
 wow.init();
 </script>
 <?php }
 add_action('wp_footer', 'wow_init', 100 );
 
Reply