Adding and Customizing Animations

Docs

01. Global Animations

The following snippets can be found in the admin section under 'Shortcodes' and should be utilized in the Widget/HTML module within the content section


Global

Applies animations for every single module 


<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.hs-content .j-module').addClass('is-anim');
// wow
wow = new WOW(
    {
      boxClass:     'is-anim',
      animateClass: 'animate__animated animate__fadeIn',
      mobile:       true,
      offset:       50
    }
  )
  wow.init();
    

});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    page animations
</div>

Columns

Applies animations only for columns elements 


<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.hs-content .j-hgrid,.hs-content .is-anim-block').addClass('is-anim');
// wow
wow = new WOW(
    {
      boxClass:     'is-anim',
      animateClass: 'animate__animated animate__fadeInUp',
      mobile:       true,
      offset:       50
    }
  )
  wow.init();
    

});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
    page animations
</div>

The default animation effect is fadeInUp.

All animation effect classes:

  • animate__fadeIn
  • animate__fadeInUp
  • animate__zoomIn
  • animate__slideInUp

 

02. Animations for a specific module

It is possible to add an animation effect only for a specific module Columns. Inside the Columns that should be animated you simply add Widget/HTML with the following variables:

  


<var>wow animate__animated animate__fadeIn/var>

Animations only for one  of the columns 


<ins>wow animate__animated animate__fadeIn</ins>

All available options:

  • wow animate__animated animate__fadeIn
  • wow animate__animated animate__fadeInUp
  • wow animate__animated animate__fadeInLeft
  • wow animate__animated animate__fadeInRight
  • wow animate__animated animate__zoomIn
  • wow animate__animated animate__slideInUp

03. Folded Animations

Folded animations for the images 


<var>wow is-folded-left-img</var>




<var>wow is-folded-right-img</var>

Folded animation for the whole block ( Columns ) 


<var>wow is-folded-left</var>




<var>wow is-folded-right</var>
wow is-folded-left-img
wow is-folded-right-img

Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Etiam ultricies nisi vel augue. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aliquam erat volutpat. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.

 

Vivamus elementum semper nisi. Donec vitae sapien ut libero venenatis faucibus. Fusce ac felis sit amet ligula pharetra condimentum. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Curabitur ullamcorper ultricies nisi.

 

Morbi mattis ullamcorper velit. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Cras ultricies mi eu turpis hendrerit fringilla. Curabitur at lacus ac velit ornare lobortis.

New Button
wow is-folded-left

wow is-folded-blur

Matrix Themes


Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates




has-right-col-border

Try Matrix Builder
draggable-logo

Global colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
Template configurations
 
has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
snip-nav --line01
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white white-outline-btn
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

 

#cc-inner .my-class {

  color:#f0f0f0;

}

 


Note: All changes made here will be applied to your entire website.
is-switcher