0
Welcome Guest! Login
0 items Join Now

Adding Animate.css and wow.js to Callisto (updated)

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Adding Animate.css and wow.js to Callisto (updated)

    Posted 8 years 10 months ago
    • 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:
      // JavaScript Document
      new WOW().init();
      and save that again to the same folder and call it wowinit.js

      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 1 month 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.
  • Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 10 months ago
    • Hello,
      Very nice, helpful.
      Hope more G5 extension tutorials will follow.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 10 months ago
    • 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.
  • Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 10 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 10 months ago
    • 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.
  • Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 8 months ago
    • Hi

      In custom HTML particle I can simply write a div like this:
      <div class="wow slideInLeft" data-wow-delay="5s"></div>
      and animation will occur after 2 seconds.

      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: 8 years 8 months ago by Udruga Animi.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 8 months ago
    • 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.
  • Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 6 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 6 months ago
    • 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.
  • Re: Adding Animate.css and wow.js to Callisto

    Posted 8 years 6 months ago
    • Is online now...

Time to create page: 0.069 seconds