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

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>

JavaScript behavior

Attributes 

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

Callbacks 

            
              afterShow: function() {} - function

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.