Skip to main content

Show Animation

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

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/animate.css">
Copy

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

<script src="../../assets/js/components/hs.show-animation.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
    $.HSCore.components.HSShowAnimation.init('.js-animation-link');
  });
</script>
Copy

Basic example

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 key.

<div class="btn-group btn-group-toggle">
  <a class="js-animation-link btn btn-outline-secondary btn-wide active" href="javascript:;"
     data-target="#firstContent"
     data-link-group="groups"
     data-animation-in="slideInUp">
   First content</a>
  <a class="js-animation-link btn btn-outline-secondary btn-wide" href="javascript:;"
     data-target="#secondContent"
     data-link-group="groups"
     data-animation-in="slideInUp">
    Second content</a>
  <a class="js-animation-link btn btn-outline-secondary btn-wide" href="javascript:;"
     data-target="#thirdContent"
     data-link-group="groups"
     data-animation-in="slideInUp">
    Third content</a>
</div>

<div id="firstContent" class="py-5" data-target-group="groups">
  <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 key.</p>
</div>

<div id="secondContent" class="py-5" data-target-group="groups" 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" data-target-group="groups" 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

Attributes 

data-link-group="groupName" - string
data-target="#ID" - string
data-target-group="groupName" - string
data-animation-in="fadeIn" - string
Copy

Callbacks 

afterShow: function() {} - function
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-link-group="".

JavaScript function Description Default value

data-link-group

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

data-target

 Defines the block ID to be displayed.

data-target-group

 Determines which blocks belong to the same group. This definition is necessary, since blocks can be located in different parent blocks, otherwise it would be impossible to show/hide the necessary blocks based solely on the parent.

data-animation-in

 Revealing effect. Script does not work without animate.css All available animation classes can be found in the site. no

afterShow: function () {}

 This function executes the code, inside the body of the function, every time the block appears.