Using Animista
Namaste!
I have seen a couple of questions in the various Divi groups about using the animations that are shown on the animista web site. For those of you who don’t know, this site gives you an easy way to generate the styling for a variety of different animations. Basically, you give an animation type (like scale-up), a duration, a timing function, along with several other options. The site will then give you several pieces of CSS that you need to put into Divi.
Once you navigate to the site you can pick one or several animations, along with options. These can then be saved to a clipboard. For this tutorial, I just grabbed the scale-up animation with the base options. Once you finish picking, there is an icon on the right side of the screen you click – looks like the image on the left. Once you click that you will get some CSS. In this case:
.scale-up-center { -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; -moz-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
Go ahead and copy this code to the clipboard and then paste it into your favorite text editor. I like Sublime Text – donateware and a great product! If you want to be able to use additional animations, go through the process with each you want to employ on your site.
Once you are done with this, you still need to grab the necessary keyframes. I go into more detail about animation and keyframes in this past tutorial, which you can read if interested. After you copy your last animation to the clipboard, you should see a small notice at the bottom with a link to “grab” the keyframes. When you click this you will get another bolus of code for you to copy to your text editor. In this simple case:
@-webkit-keyframes scale-up-center{ 0% { -webkit-transform:scale(.5); transform:scale(.5) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @keyframes scale-up-center { 0% { -webkit-transform:scale(.5); transform:scale(.5); } 100% { -webkit-transform:scale(1); transform:scale(1) } }
Make sure, that the keyframes names (in this case, scale-up-center), match the other styling you copied – one set of keyframes per animation. It may look like the keyframes are repeated twice, but notice that one has a ‘-webkit’ prefix. This is so that all browsers can display your animation. Okay, now head over to Divi. Normally, I strongly advocate that people use a child theme, but in this tutorial I will show you how to do this without one. (You really should use one!) On your dashboard navigate to Divi >> Theme Options >> General. Sorry to those using Divi in another language! At the bottom of this tab, there is a box labeled “Custom CSS”. Paste all of the code you got from the Animista site into this box. Save your changes and then add a new post or page.
To apply the animation, you need to add the class to the object that you want to animate. The main difficulty here is that by just adding the class to an element means that it will animate as soon as it loads. So, if the element is out of the viewport, your user will never see the animation. So, let’s use a little jQuery -I know it is a little scary, but this isn’t that advanced!
So, add a code module onto your page. You can also elect to go to Divi>>Theme Options>>Integration>>Add code to the head of your blog, on the dashboard. Add in either place:
jQuery(document).ready(function($){ var $theDiv = $('#animateMe'); $(window).scroll(function() { var scroll = $(window).scrollTop(), objectPosition = $theDiv.offset().top - 500; if (scroll > objectPosition) { $theDiv.addClass("scale-up-center"); } else { $theDiv.removeClass("scale-up-center"); } }); });
I can’t easily add it into my code formattingo on this blog, but make sure to put <script> in front of the code and </script> after the code to tell the browser that this is javascript. I’m not going to explain this code in detail, but basically, the code is saying to add the animation to the element with an ID of ‘animateMe’ when it reaches the mid-point of the viewport. I have explained this code in detail in a previous post, so you can take a look to learn more. In order to make sure that the code module doesn’t show up on your page, click the custom CSS tab and in the box labeled “Main Element” add in ‘display: none;’.
Lastly, we need to add our object and give it the right ID to be targeted. I added in a 1/4 column button module.
Within the module, once again click on the “Custom CSS” tab. Then, give it an ID of ‘animateMe’ in the box at the top. If you look at the code above, you can see that it is our target on the third line. Make sure there is something above the button module to push it out of the viewport so that it will trigger at the midpoint.
That is it! Pretty simple overall. The only thing I would do differently on my own site is to put the jQuery code into a separate file, which I explain how to do here. As usual, an email or comment will get you help with any problems you may have.
Metta!!
UPDATE: Vana asked about being able to show the animation on hover. This is actually a little more simple that what I’ve described. You will not need the javascript at all. Basically, give the element(s) you want to animate a specific class name. For example, ‘animateThis’. Then, change the first set of CSS from this example by removing the current class identifier, ‘.scale-up-center’, and replacing it with ‘.animateThis:hover’. All of the other styling should remain the same. Any class name can be used, just replace the ‘.animateThis’ portion. Good Luck!!
Hello!
I ‘ve been struggling with Animista and I was so grateful when I saw your post.
I followed and tried your tutorial locally but still could not make it work.
I pasted the CSS and the keyframes code to Theme options.
I put scale-up-center class and animateME ID to an image module.
Above it I put a code module with your .js in the content area of its General settings.
I have also added some content above my image.
But it still does not work…
What am I doing wrong?
Also, it would be wonderful to know how to use these animations on hover rather than on load.
Thanks in advance!
Hi Vana,
I don’t quite understand where you put the code, it needs to be in either a code module or in Divi>>Theme Options>>Integration>>Add code to the head of your blog. Remember to put it in script tags! With regards to the image module, you only want to add the animateMe ID. The javascript will add the scale-up-center. Hope this helps!! I will update the tutorial later on how to trigger the animation on hover. Great idea!
Hi Bob
so is this what the code should look like for the hover effect as you explained in the update ?
.animateThis:hover {
-webkit-animation: animateThis 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
-moz-animation: animateThis 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: animateThis 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes animateThis{
0% {
-webkit-transform:scale(.5);
transform:scale(.5)
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes animateThis {
0% {
-webkit-transform:scale(.5);
transform:scale(.5);
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
Hi Bob, got it sorted, thanks for a awesome tutorial
Hi Rehan,
Yup, exactly! You need to make sure that the element you want to animate has the class ‘animateThis’ and you are good to go.
Cheers!