Adding WOW.js and Animate.css into X Pro + Smooth transition + Animation distance control

[Georgich]

Hi, everyone!

Today i’m gonna show you how to add WOW.js and Animate.css into X Pro Theme.

Part I - Installing WOW.js and Animate.css

1. Download child theme for X Pro (https://theme.co/apex/child-themes)
2. Install and activate your child theme
3. In child theme directory create two folders calles “js” and “css”
4. Download WOW.JS (https://github.com/matthieua/WOW)
5. Download Animate.css (https://github.com/daneden/animate.css)
6. Upload wow.js file to your “js” folder in child theme directory
7. Upload animate.css file to your “css” folder in child theme directory
8. Add to your child theme functions.php this code after “Additional Functions”:

//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'x_enqueue_scripts' );
function x_enqueue_scripts() {
	wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.css' );
	wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
}

//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'x_wow_init_in_footer');
function x_wow_init_in_footer() {
	add_action( 'print_footer_scripts', 'wow_init' );
}

//* Add JavaScript before </body>
function wow_init() { ?>
	<script type="text/javascript">
		new WOW().init();
	</script>
<?php }

Now it’s OK. DON’T FORGET TO CLEAN YOUR BROWSER CACHE!
I’ll recomend to use Clean Cache plugin for Chrome Browser for this purposes.

Part II - Animating your elements (or something else)

1. Choose element you want to animate (i’m using Heading element)
2. Go to Customize in Cornerstone and add “wow fadeInLeft” classes. Save
3. Preview your page (after reloading). Everything must works

Part III - Smooth transition / Animation distance control

You must learn, that X Pro already have fadeInLeft class (and other animation classes). It uses to animate whole columns but not elements. So you must understand that animation of your elements with wow.js and animate.css will look just same like they was.

To add a smoother animation and control the distance of your animation you should edit animate.css file you already have in your css folder in your child theme directory.

I can give you a little inspiration for this to understand how it works and what you sould do. So:

1. Open and edit your animate.css file
2. Find fadeInLeft animation code (it will looks like this):

@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

After this part of code add your own class code. I will call it fadeInLeftSmooth

@-webkit-keyframes fadeInLeftSmooth {
from {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
transition: all .5s ease;
}

to {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}

@keyframes fadeInLeftSmooth {
from {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
transition: all .5s ease;
}

to {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}

.fadeInLeftSmooth {
-webkit-animation-name: fadeInLeftSmooth;
animation-name: fadeInLeftSmooth;
}

-100px - it’s a distance of your animation. In fadeInLeft it was 100% that was too long for me and looks bad. Now you have your own class which calls fadeInLeftSmooth and it have a transition property. You can use your own parameters instead of mine. Something like Cubic Bezier or else. Also you can edit animation timing - my animation have .5s. You can make it a little longer or faster. Just edit your own created class. After this just edit your class in Customize of your element.

Done. Sorry for my english. Wish you a nice day!

P.S. After uploading your new animate.css don’t forget to clean browsers cache!

[christian]

Hey Philipp,

Thanks for sharing. This is best posted in our to Peer to Peer Forum though as this is not a support related and involves custom development.

Thanks.