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>
$(document).on('ready', function () {
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
$('.js-animation-link').each(function () {
var showAnimation = new HSShowAnimation($(this)).init();
});
});
</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
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>
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>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-show-animation-options='{
...
}' - array
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 |
|---|---|---|
|
|
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 |
|
|
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 | - |