Use custom animation.js

Here's a comprehensive documentation for the animation.js file located at:

System → Site Template Styles → morphpro/js/animation.js

This guide will help you understand the animations implemented and how to apply them using the Quix Page Builder's Advanced → Identifier section. Select the element you want to animate and then add custom classes or IDs for each animation for your website.

Animation Features Overview

The the animation.js script introduces three primary animations:

1. Split Text Animation: Animates individual characters within a text element as they appear in the viewport.

2. Infinite Horizontal Scroll: This creates a continuous right-to-left scrolling effect for elements.

3. Count-Up Animation: Animates numerical values counting up to a target number when they enter the viewport.

1. Split Text Animation

Purpose: Animates each character of a text element individually, creating a dynamic entrance effect as the element scrolls into view.

How It Works:

• Target elements with the class .animate-split-text.

• Searches for child elements like h1 span, h2 span, h3 span, or p within the container.

• Splits the text content into individual characters, wrapping each in a <span>.

• Applies an animation to each character with a slight delay, creating a cascading effect.

Usage in Quix:

1. Add the Class:

   • In the Quix Page Builder, select the desired element.

   • Navigate to Advanced → Identifier.

   • Enter animate-split-text in the Class field.

2. Structure Your Content:

   • Ensure your text is wrapped appropriately. For example:

     HTML:
     <h2><span>Your Animated Text</span></h2>

Note: The script automatically handles the splitting and animation; no additional setup is required beyond adding the class.

2. Infinite Horizontal Scroll

Purpose: Creates a seamless, continuous scrolling effect from right to left, ideal for marquees or ticker displays.

How It Works:

• Targets elements with the class .animate-unlimited-rotation.

• Duplicates the content within the element to ensure a continuous loop.

• Animates the element's horizontal position from 0 to -50% of its width.

• Repeats the animation infinitely with a linear easing for smooth motion.

Usage in Quix:

1. Add the Class:

   • In the Quix Page Builder, select the desired element.

   • Navigate to Advanced → Identifier.

   • Enter animate-unlimited-rotation in the Class field.

2. Structure Your Content:

   • Wrap your scrolling items within a container. For example:

     HTML:

     <div class="animate-unlimited-rotation"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> </div>

Note: The script handles content duplication and animation automatically. Ensure your items are inline elements (like <span>) for optimal results.

3. Count-Up Animation

Purpose: Animates numerical values, counting up from zero to a specified target number when the element enters the viewport.

How It Works:

• Targets elements with the class .count-up containing an h2 with a <span>.

• Extracts the numerical value and any suffix (e.g., %, +) from the span's text.

• Animates the number from 0 to the target value over a set duration (e.g., 2 seconds).

• Ensures the final displayed value matches the original target number precisely.

Usage in Quix:

1. Add the Class:

   • In the Quix Page Builder, select the desired element.

   • Navigate to Advanced → Identifier.

   • Enter count-up in the Class field.

2. Structure Your Content:

   • Format your counter as follows:

     HTML:

     <div class="count-up"> <h2><span>100+</span></h2> </div>

Note: The script automatically detects and animates the number. Ensure the numerical value is within a <span> inside an h2 tag.

Adding New Animations & Customizations

Purpose: To extend the animation capabilities by introducing new effects or modifying existing ones to suit specific design requirements.​

How to Add a New Animation

1. Define a Unique Class Name:

   • Choose a descriptive class name for your new animation, e.g., animate-fade-in.​

2. Implement the Animation in animation.js:

   • Within the animation.js file, add a new JavaScript function or extend existing logic to handle elements with your new class.​

   • Utilize the animate() function from Motion One to define the animation properties.​

   Example:

   javascript:

   document.querySelectorAll('.animate-fade-in').forEach((el) => { animate(el, { opacity: [0, 1] }, { duration: 1, easing: 'ease-in' }); });

3. Apply the Class in Quix:

   • In the Quix Page Builder, select the desired element.​

   • Navigate to Advanced → Identifier.​

   • Enter your new class name, e.g., animate-fade-in, in the Class field.​

Customizing Existing Animations

• Modify Animation Parameters:

  • Adjust properties such as duration, delay, easing, and transformation values within the animation.js file to achieve the desired effect.​

• Change Trigger Conditions:

  • If you want animations to trigger under different conditions (e.g., on hover instead of scroll), modify the event listeners accordingly.​

• Combine Animations:

  • Apply multiple classes to an element to combine different animation effects. Ensure that the combined animations do not conflict and produce the desired outcome.​

Additional Information

• Viewport Detection: The script uses the Intersection Observer API to detect when elements enter the viewport, triggering animations accordingly.

• Customization: While the default durations and delays are set within the script, they can be adjusted by modifying the animation.js file as needed.

• Performance: The animations are optimized for performance, ensuring smooth transitions without significant impact on page load times.

Summary

By assigning the appropriate classes to your elements within the Quix Page Builder's Advanced → Identifier section, you can effortlessly integrate dynamic animations into your Joomla website:

• Use animate-split-text for character-based text animations.

• Use animate-unlimited-rotation for continuous horizontal scrolling effects.

• Use count-up for animated numerical counters.

These enhancements can significantly improve user engagement and add a modern touch to your site's design.