Show Animation

A plugin to make boring show/hide blocks elegant with the opening/closing animation effects.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of show animations
    $('.js-animation-link').each(function () {
      var showAnimation = new HSShowAnimation($(this)).init();
    });
  });
</script>
Copy

Basic example

Scroll the area below the navbar or click on the menu to watch the smooth scrolling in action. It can also be used in the dropdowns.

First content Second content Third content

First content

This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.

<div class="btn-group btn-group-toggle">
  <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide active" href="javascript:;"
     data-hs-show-animation-options='{
       "targetSelector": "#firstContent",
       "groupName": "groups",
       "animationType": "css-animation",
       "animationIn": "slideInUp",
       "duration": 400
     }'>
   First content</a>
  <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide" href="javascript:;"
     data-hs-show-animation-options='{
       "targetSelector": "#secondContent",
       "groupName": "groups",
       "animationType": "css-animation",
       "animationIn": "slideInUp",
       "duration": 400
     }'>
    Second content</a>
  <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide" href="javascript:;"
     data-hs-show-animation-options='{
       "targetSelector": "#thirdContent",
       "groupName": "groups",
       "animationType": "css-animation",
       "animationIn": "slideInUp",
       "duration": 400
     }'>
    Third content</a>
</div>

<div id="firstContent" class="py-5">
  <h2>First content</h2>
  <p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.</p>
</div>

<div id="secondContent" class="py-5" style="display: none; opacity: 0;">
  <h2>Second content</h2>
  <p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
</div>

<div id="thirdContent" class="py-5" style="display: none; opacity: 0;">
  <h2>Third content</h2>
  <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
</div>
Copy

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of show animation
    $('.js-animation-link').each(function () {
      var showAnimation = new HSShowAnimation($(this), {
        afterShow: function() {
          alert('afterShow callback done!');
        }
      }).init();
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-show-animation-options='{
   ...
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-show-animation-options='{}'.

Parameters Description Default value

groupName

 Setermines which selectors belong to the same group. This definition is necessary, since selectors can be in different parent blocks, without which it would be impossible to remove/add the necessary classes to selectors based on only the parent null

targetSelector

 Defines the ID of the block to be displayed null

classMap.active

 Asset class for invokers classMap: { active: 'active' }

animationType

 Animation appearing type:
  • simple - hide/show
  • css-animation
 'simple'

animationInit

 Class initializing css animation 'animated'

animationIn

 Revealing animation effect null

duration

 Animation duration null

afterShow

 Executes code inside the function body each time a block appears -