{"id":44863,"date":"2015-03-27T08:35:03","date_gmt":"2015-03-27T12:35:03","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=44863"},"modified":"2016-02-24T02:47:38","modified_gmt":"2016-02-24T07:47:38","slug":"drupal-7-x-how-to-add-animation-and-configure-its-settings","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-7-x-how-to-add-animation-and-configure-its-settings.html","title":{"rendered":"Drupal 7.x. How to add animation and configure its settings"},"content":{"rendered":"

\r\n

This tutorial shows How to add animation and configure its settings in Drupal 7.x.<\/p>\r\n

Drupal 7.x. How to add animation and configure its settings<\/a><\/p>\r\n

The TM Animate module controls the activation\/deactivation of animation. Moreover, depending on where you want to use animation, you may need the Block class or Views modules.<\/p>\r\n

In order to add animation to a block, you should perform the following steps:<\/p>\r\n

    \r\n
  1. \r\n

    In the admin panel navigate to Structure > Blocks<\/strong> menu;<\/p>\r\n<\/li>\r\n

  2. \r\n

    Click configure<\/strong> link next to the needed block;<\/p>\r\n<\/li>\r\n

  3. \r\n

    In the CSS class(es)<\/strong> field add 2 classes separated with space: wow<\/strong>, to run animation when the block appears in the visibility, and the animation class:<\/p>\r\n

    \"Drupal.-How-to-add-animation-and-configure-its-settings-1\"<\/a>\r\n<\/li>\r\n

  4. \r\n

    Save the changes.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    In order to add animation to a view, follow the steps below:<\/p>\r\n

      \r\n
    1. \r\n

      In the admin panel navigate to Structure > Views<\/strong> menu;<\/p>\r\n<\/li>\r\n

    2. \r\n

      Click edit<\/strong> link next to the needed view:<\/p>\r\n

      \"Drupal.-How-to-add-animation-and-configure-its-settings-2\"<\/a>\r\n<\/li>\r\n

    3. \r\n

      In the Format<\/strong> section click settings<\/strong> link:<\/p>\r\n

      \"Drupal.-How-to-add-animation-and-configure-its-settings-3\"<\/a>\r\n<\/li>\r\n

    4. \r\n

      In the pop-up window in the Row<\/strong> section find Class attribute<\/strong> field and enter the animation class and wow<\/strong> class there:<\/p>\r\n

      \"Drupal.-How-to-add-animation-and-configure-its-settings-4\"<\/a>\r\n<\/li>\r\n

    5. \r\n

      Press Apply<\/strong> button.<\/p>\r\n<\/li>\r\n

    6. \r\n

      Save the view changes.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

      You can check all available animation classes by following this link<\/a>.<\/p>\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n

      Drupal 7.x. How to add animation and configure its settings<\/a><\/p>\r\n

      <\/p>","protected":false},"excerpt":{"rendered":"

      This tutorial shows How to add animation and configure its settings in Drupal 7.x.<\/p>\n","protected":false},"author":60,"featured_media":44868,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[523,593,791],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/44863"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=44863"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/44863\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/44868"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=44863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=44863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=44863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}