ZigZag Entrance Animation [TMZ-216]

assets/dev/scss/variables/values.scss

@@ -1,4 +1,5 @@
 $transition: all .3s;
+
 $corners-shape-default: 8px;
 $corners-shape-sharp: 0;
 $corners-shape-rounded: 12px;

modules/content/assets/js/frontend/handlers/hello-plus-zigzag.js

@@ -0,0 +1,106 @@
+export default class ZigZagHandler extends elementorModules.frontend.handlers.Base {
+	getDefaultSettings() {
+		return {
+			selectors: {
+				main: '.ehp-zigzag',
+				itemWrapper: '.ehp-zigzag__item-wrapper',
+			},
+			constants: {
+				entranceAnimation: 'zigzag_animation',
+				entranceAnimationAlternate: 'zigzag_animation_alternate',
+				hasEntranceAnimation: 'has-entrance-animation',
+				hasAlternateAnimation: 'has-alternate-animation',
+				none: 'none',
+				visible: 'visible',
+				hidden: 'hidden',
+			},
+		};
+	}
+
+	getDefaultElements() {
+		const selectors = this.getSettings( 'selectors' );
+
+		return {
+			main: this.$element[ 0 ].querySelector( selectors.main ),
+			itemWrappers: this.$element[ 0 ].querySelectorAll( selectors.itemWrapper ),
+		};
+	}
+
+	bindEvents() {
+		if ( this.elements.itemWrappers.length > 0 ) {
+			this.elements.itemWrappers.forEach( ( itemWrapper ) => {
+				itemWrapper.addEventListener( 'animationend', this.removeAnimationClasses.bind( this ) );
+			} );
+		}
+	}
+
+	getResponsiveSetting( controlName ) {
+		const currentDevice = elementorFrontend.getCurrentDeviceMode();
+		return elementorFrontend.utils.controls.getResponsiveControlValue( this.getElementSettings(), controlName, '', currentDevice );
+	}
+
+	initEntranceAnimation() {
+		const { entranceAnimation, entranceAnimationAlternate, none, hasAlternateAnimation, visible, hidden } = this.getSettings( 'constants' );
+		const entranceAnimationClass = this.getResponsiveSetting( entranceAnimation );
+
+		if ( ! entranceAnimationClass || none === entranceAnimationClass ) {
+			return;
+		}
+		const alternateAnimationClass = this.getResponsiveSetting( entranceAnimationAlternate );
+
+		const observerCallback = ( entries ) => {
+			const sortedEntries = [ ...entries ].sort( ( a, b ) => {
+				const indexA = a.target.dataset.index;
+				const indexB = b.target.dataset.index;
+				return indexA - indexB;
+			} );
+
+			sortedEntries.forEach( ( entry, index ) => {
+				entry.target.classList.add( hidden );
+				if ( entry.isIntersecting && ! entry.target.classList.contains( visible ) ) {
+					setTimeout( () => {
+						entry.target.classList.remove( hidden );
+						const animation = entry.target.classList.contains( hasAlternateAnimation ) ? alternateAnimationClass : entranceAnimationClass;
+						entry.target.classList.add( animation );
+					}, index * 200 );
+				}
+			} );
+		};
+
+		const observerOptions = {
+			root: null,
+			rootMargin: '0px',
+			threshold: 0.5,
+		};
+		const observer = new IntersectionObserver( observerCallback, observerOptions );
+
+		this.elements.itemWrappers.forEach( ( element ) => observer.observe( element ) );
+	}
+
+	removeAnimationClasses( event ) {
+		const { entranceAnimation, entranceAnimationAlternate, visible, hidden, hasAlternateAnimation } = this.getSettings( 'constants' );
+		const element = event.target;
+		const entranceAnimationClass = this.getResponsiveSetting( entranceAnimation );
+		const alternateAnimationClass = this.getResponsiveSetting( entranceAnimationAlternate );
+
+		const animation = element.classList.contains( hasAlternateAnimation ) ? alternateAnimationClass : entranceAnimationClass;
+		element.classList.remove( animation );
+
+		element.classList.remove( hidden );
+		element.classList.add( visible );
+	}
+
+	getAlternateAnimationClass( entranceAnimationClass ) {
+		return entranceAnimationClass.replace( /Right|Left/g, ( match ) => ( 'Right' === match ? 'Left' : 'Right' ) );
+	}
+
+	onInit( ...args ) {
+		const { hasEntranceAnimation } = this.getSettings( 'constants' );
+
+		super.onInit( ...args );
+
+		if ( this.elements.main && this.elements.main.classList.contains( hasEntranceAnimation ) ) {
+			this.initEntranceAnimation();
+		}
+	}
+}

modules/content/assets/js/frontend/hello-plus-zigzag-fe.js

@@ -0,0 +1,13 @@
+export default class HelloPlusZigzagFe extends elementorModules.Module {
+	constructor() {
+		super();
+
+		elementorFrontend.elementsHandler.attachHandler( 'zigzag', [
+			() => import( /* webpackChunkName: 'js/content' */ './handlers/hello-plus-zigzag' ),
+		] );
+	}
+}
+
+window.addEventListener( 'elementor/frontend/init', () => {
+	new HelloPlusZigzagFe();
+} );

modules/content/assets/scss/hello-plus-zigzag.scss

@@ -34,6 +34,9 @@
 	--zigzag-box-padding-inline-start: 0;
 	--zigzag-box-padding-inline-end: 0;
 
+	--zigzag-animation-delay: 0;
+	--zigzag-animation-duration: 1s;
+
 	align-items: center;
 	background-color: transparent;
 	display: flex;
@@ -253,6 +256,23 @@
 				padding-block-end: var(--zigzag-box-padding-block-end);
 			}
 		}
+
+		&.has-entrance-animation {
+			animation-delay: var(--zigzag-animation-delay);
+			animation-duration: var(--zigzag-animation-duration);
+			animation-fill-mode: both;
+			animation-timing-function: ease;
+		}
+
+		&.hidden {
+			opacity: 0;
+			visibility: hidden;
+		}
+
+		&.visible {
+			opacity: 1;
+			visibility: visible;
+		}
 	}
 
 	@media screen and (max-width: $screen-tablet-max) {

modules/content/classes/control-zig-zag-animation.php

@@ -0,0 +1,39 @@
+<?php
+namespace HelloPlus\Modules\Content\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+use Elementor\Control_Animation;
+
+class Control_Zig_Zag_Animation extends Control_Animation {
+
+	const CONTROL_TYPE = 'ehp-zigzag-animation';
+
+	public function get_type(): string {
+		return static::CONTROL_TYPE;
+	}
+
+	public static function get_default_animations(): array {
+		return [
+			'Fading' => [
+				'fadeIn' => 'Fade In',
+				'fadeInLeft' => 'Fade In Left',
+				'fadeInRight' => 'Fade In Right',
+				'fadeInUp' => 'Fade In Up',
+			],
+			'Bouncing' => [
+				'bounceIn' => 'Bounce In',
+				'bounceInLeft' => 'Bounce In Left',
+				'bounceInRight' => 'Bounce In Right',
+				'bounceInUp' => 'Bounce In Up',
+			],
+			'Sliding' => [
+				'slideInLeft' => 'Slide In Left',
+				'slideInRight' => 'Slide In Right',
+				'slideInUp' => 'Slide In Up',
+			],
+		];
+	}
+}

modules/content/classes/render/widget-zig-zag-render.php

@@ -29,12 +29,19 @@ public function __construct( Zig_Zag $widget ) {
 	public function render(): void {
 		$first_zigzag_direction = $this->settings['first_zigzag_direction'];
 		$has_alternate_icon_color = $this->settings['has_alternate_icon_color'];
+		$entrance_animation = $this->settings['zigzag_animation'] ?? '';
+		$has_entrance_animation = ! empty( $entrance_animation ) && 'none' !== $entrance_animation;
+		$has_alternate_animation = 'yes' === $this->settings['animation_alternate'];
 
 		$layout_classnames = [
 			self::LAYOUT_CLASSNAME,
 			'has-direction-' . $first_zigzag_direction,
 		];
 
+		if ( $has_entrance_animation ) {
+			$layout_classnames[] = 'has-entrance-animation';
+		}
+
 		if ( 'yes' === $has_alternate_icon_color ) {
 			$layout_classnames[] = 'has-alternate-icon-color';
 		}
@@ -46,15 +53,43 @@ public function render(): void {
 		?>
 		<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
 			<?php
+			$remainder = 'left' === $first_zigzag_direction ? 1 : 0;
+
 			$graphic_element = $this->settings['graphic_element'];
 			$repeater = 'image' === $graphic_element ? $this->settings['image_zigzag_items'] : $this->settings['icon_zigzag_items'];
 
 			foreach ( $repeater as $key => $item ) {
+				$is_even = $remainder === $key % 2;
+
+				$item_class = self::ITEM_CLASSNAME;
+
+				$item_class .= ' row' . ( $is_even ? '-even' : '-odd' );
+
+				$is_even_index = 0 === ( $key + 1 ) % 2;
+
+				if ( $has_alternate_icon_color && $is_even_index ) {
+					$item_class .= ' has-alternate-icon-color';
+				}
+
+				$wrapper_classnames = 'ehp-zigzag__item-wrapper';
+
+				if ( $has_entrance_animation ) {
+					$wrapper_classnames .= ' has-entrance-animation';
+
+					if ( $has_alternate_animation && $is_even_index ) {
+						$wrapper_classnames .= ' has-alternate-animation';
+					}
+				}
+
+				$this->widget->add_render_attribute( 'zigzag-item-wrapper-' . $key, [
+					'class' => $wrapper_classnames,
+				] );
+
 				$this->widget->add_render_attribute( 'zigzag-item-' . $key, [
 					'class' => self::ITEM_CLASSNAME,
 				] );
 				?>
-				<div class="ehp-zigzag__item-wrapper">
+				<div <?php $this->widget->print_render_attribute_string( 'zigzag-item-wrapper-' . $key ); ?>>
 					<div <?php $this->widget->print_render_attribute_string( 'zigzag-item-' . $key ); ?>>
 						<?php
 							$this->render_graphic_element_container( $item, $key );

modules/content/module.php

@@ -6,8 +6,10 @@
 	exit; // Exit if accessed directly.
 }
 
+use Elementor\Controls_Manager;
 use HelloPlus\Includes\Module_Base;
 use HelloPlus\Includes\Utils;
+use HelloPlus\Modules\Content\Classes\Control_Zig_Zag_Animation;
 
 /**
  * class Module
@@ -40,6 +42,19 @@ protected function get_widget_ids(): array {
 		];
 	}
 
+	/**
+	 * @return void
+	 */
+	public function register_scripts() {
+		wp_register_script(
+			'helloplus-zigzag-fe',
+			HELLOPLUS_SCRIPTS_URL . 'helloplus-zigzag-fe.js',
+			[ 'elementor-frontend' ],
+			HELLOPLUS_VERSION,
+			true
+		);
+	}
+
 	public function register_styles(): void {
 		wp_register_style(
 			'helloplus-zigzag',
@@ -79,8 +94,14 @@ public static function is_active(): bool {
 		return Utils::is_elementor_active();
 	}
 
+	public function register_controls( Controls_Manager $controls_manager ) {
+		$controls_manager->register( new Control_Zig_Zag_Animation() );
+	}
+
 	protected function register_hooks(): void {
 		parent::register_hooks();
+		add_action( 'elementor/frontend/after_register_scripts', [ $this, 'register_scripts' ] );
 		add_action( 'elementor/frontend/after_register_styles', [ $this, 'register_styles' ] );
+		add_action( 'elementor/controls/register', [ $this, 'register_controls' ] );
 	}
 }

modules/content/widgets/cta.php

@@ -46,6 +46,10 @@ public function get_style_depends(): array {
 		return [ 'helloplus-cta' ];
 	}
 
+	public function get_script_depends(): array {
+		return [ 'helloplus-content-fe' ];
+	}
+
 	protected function render(): void {
 		$render_strategy = new Widget_CTA_Render( $this );
 

modules/content/widgets/hero.php

@@ -48,6 +48,10 @@ public function get_style_depends(): array {
 		return [ 'helloplus-hero' ];
 	}
 
+	public function get_script_depends(): array {
+		return [ 'helloplus-content-fe' ];
+	}
+
 	protected function render(): void {
 		$render_strategy = new Widget_Hero_Render( $this );