• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
  1. Support

Animations

Guides

01. Global Animations

The below snippets can be used in Widget/HTML widget  of content section.

 



Page Animations


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

The viewport folded animations have been added on 11.06.2021, so please make sure you're using the latest CSS updates

 

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

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Common support issues

Features

  • Templates
  • Page Builder
  • Add-ons
  • Landing pages
  • Alt Classes
  • Matrix variables

Get inspired

  • Most popular templates
  • Website examples
  • Custom widgets
  • Block Elements
  • Fluid Sections

Quick links

  • Marketplace
  • Matrix Themes for Agencies
  • Matrix Themes for Web Designers
  • Small Business websites
  • Create a new website
  • Pricing
hide-in-doc-page

draggable-logo

Showcase

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
   text color
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
 
has-center-nav g-font has-large-header
 
Navigation styles
 
size-15 weight-400 snip-nav --line01 is-uppercase
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white

 

Typography

Heading H1
weight-600 is-uppercase
 
Heading H2
weight-400 is-uppercase
 
Heading H3
weight-600 is-uppercase
 
Buttons
weight-600 is-uppercase
 
Animations
 

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

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close