Show Animation

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

How to use?

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

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-target="#firstContent"
                         data-link-group="groups"
                         data-animation-in="slideInUp">
                       First content</a>
                      <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-wide" href="javascript:;"
                         data-target="#secondContent"
                         data-link-group="groups"
                         data-animation-in="slideInUp">
                        Second content</a>
                      <a class="js-animation-link btn btn-sm btn-outline-secondary btn-sm-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 a key point.</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

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.