Adding Animate.css and wow.js to Callisto (updated)
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Recent Gantry 4 templates made good use of animate.css and wow.js to add animations to page content. These are not yet included in Gantry 5 but they can easily be added in.
1. download animate.css from http://daneden.github.io/animate.css/ and save it in /templates/rt_callisto/custom/wow (you may have to create custom folder and will have to create wow folder).
2. download wow.js zip from https://github.com/matthieua/WOW Extract this locally and the only file that you need is called wow.min.js - copy this tot the same folder as step 1 above.
3. create a text file with this content:and save that again to the same folder and call it wowinit.js// JavaScript Document new WOW().init();
4. goto gantry 5 themes and switch to the "base configuration" "settings" tab.
This image is hidden for guests.
Please log in or register to see it.
5. scroll right down to the bottom and you will find the custom js/css atom. Enable this and then add a css item called "animate" click on the word "animate" you just typed and the path to the file should be entered as "templates/rt_callisto/custom/wow/animate.css". Similarly add two items for Javascript one called "wow" with a file path of "templates/rt_callisto/custom/wow/wow.min.js" and one called "wowinit" with a filepath of "templates/rt_callisto/custom/wow/wowinit.js". Then save the settings.
This image is hidden for guests.
Please log in or register to see it.
NOTE: Please note that you may also load animate.css and wow.js from cdnjs.com instead if you prefer that to keeping copies on your own server. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css and https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js
6. now you need to decide which "page" you want to use wow.js on. Let's take the Callisto "Home" page as the example. Change from the "base configuration" we have been working on to "Callisto - Home" and now look at the "page settings" tab.
7. Drag the Custom CSS/JS atom onto the atoms section and save the layout
This image is hidden for guests.
Please log in or register to see it.
8. You can now use wow and the animate.css classes where you wish.
9. Let's just test that it works on the Callisto home page... So, click on the settings for the "Advanced Features" particle in the footer section.
This image is hidden for guests.
Please log in or register to see it.
10. Add CSS classes of "wow" and "bounceInUp" and click Apply. Then save the layout again.
This image is hidden for guests.
Please log in or register to see it.
11. Look at the home page of Callisto and scroll down. You should then see the "Advanced Features" animate.
That's it! Enjoy!
Regards, Mark. - Last Edit: 8 years 11 months ago by MrT.
-
The following users have thanked you: Gws, Seniha Meliha, David Goode, Kay Mattheis, JuLa, Marni J Derr, Paolo Coveri, Kat05, Henning, Max Power COM_KUNENA_THANKYOU_MORE_USERS
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Seniha Meliha
- Elite Rocketeer
- Posts: 815
- Thanks: 5
-
Hello,
Very nice, helpful.
Hope more G5 extension tutorials will follow.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Thanks
- we'll do our best - if we see a common question asked we'll try and write additional tutorial here to help every one out. Mean while Ryan is working very hard on G5 documentation to make it even better than it already is.
Regards, Mark. -
The following users have thanked you: neuclix
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Jean-Pierre d'Argent
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
Marc,
Thanks for your explanations, I customized them to a pingdom script,
for a service they call RUM - Real User Monitoring ... and it perfectly works.
So may be should you extend the scope of this post to "CCS & JS Atom - quick tutorial - a Wow library exemple"
Jean-Pierre d'Argent - Jean-Pierre d'Argent
This email address is being protected from spambots. You need JavaScript enabled to view it.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Jean-Pierre d'Argent - yes the method can equally be applied to other JS and CSS too. But I think it's best to keep this tutorial to one practical example of what members are asking for. We'll keep the tutorials coming though - thanks for your comments.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Udruga Animi
- Sr. Rocketeer
- Posts: 109
- Thanks: 0
-
Hi
In custom HTML particle I can simply write a div like this:and animation will occur after 2 seconds.<div class="wow slideInLeft" data-wow-delay="5s"></div>
Question is, how would you apply a delay of x seconds to "Advanced features" particle you used as example, or any other particle? - Last Edit: 9 years 7 months ago by Udruga Animi.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Udruga Animi - if you want to use those classes on the particle (as a whole) then you enter them on the particle settings page (the block tab). That is also where you can specify any tag attributes such as "data-wow-delay". You cannot do this by item with the infolist particle though unless you are prepare to create an inforlist particle override and change the yaml and twig code.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Gerhard Wentzel
- Newbie
- Posts: 13
- Thanks: 0
-
Hello,
thank you for this fantastic tutorial.
I tried this to get the animation for the title and descrition in the slideshow of Ambrosia. I made all the steps above, and added this into the title of the first item of the slideshow:
<div class="wow bounceInUp"><span class="hl">Herzlich Willkommen</span></div>
But the animation don't works. Do you have an idea, what is wrong?
Site is s522461780.online.de/
Thx for your help.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Gerhard Wentzel - your site is offline so I can't check.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Gerhard Wentzel
- Newbie
- Posts: 13
- Thanks: 0
-
Time to create page: 0.077 seconds