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-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
})()
</script>
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
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.
Second content
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.
Third content
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.
<!-- Button Group -->
<div class="btn-group btn-group-toggle">
<a class="js-animation-link btn btn-outline-secondary 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-outline-secondary" 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-outline-secondary" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#thirdContent",
"groupName": "groups",
"animationType": "css-animation",
"animationIn": "slideInUp",
"duration": 400
}'>
Third content</a>
</div>
<!-- End Button Group -->
<!-- Content -->
<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>
<!-- End Content -->
<!-- Content -->
<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>
<!-- End Content -->
<!-- Content -->
<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>
<!-- End Content -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
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 |
|
|
Defines the ID of the block to be displayed | null |
|
|
Ignore active class additions for trigger. | false |
|
|
Asset class for invokers |
classMap: {
active: 'active'
}
|
|
|
Animation appearing type:
|
'simple' |
|
|
Class initializing css animation | 'animated' |
|
|
Revealing animation effect | null |
|
|
Animation duration | null |
|
|
Executes code inside the function body each time a block appears | - |