<?php
/**
 * Widget Name: Morphing Layouts
 * Description: Unique Animation SVG morphing shapes layouts
 * Author: Theplus
 * Author URI: https://posimyth.com
 *
 * @package ThePlus
 */

namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Background;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Class ThePlus_MorphingLayouts
 */
class ThePlus_MorphingLayouts extends Widget_Base {

	/**
	 * Helpdesk Link For Need help.
	 *
	 * @var tp_help of the class.
	 */
	public $tp_help = THEPLUS_HELP;

	/**
	 * Get Widget Name
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function get_name() {
		return 'tp-morphing-layouts';
	}

	/**
	 * Get Widget Title
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function get_title() {
		return esc_html__( 'Morphing Layouts', 'theplus' );
	}

	/**
	 * Get Widget Icon
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function get_icon() {
		return 'fa fa-balance-scale theplus_backend_icon';
	}

	/**
	 * Get Custom URL.
	 *
	 * @since 1.0.0
	 * @version 5.6.5
	 */
	public function get_custom_help_url() {
		$help_url = $this->tp_help;

		return esc_url( $help_url );
	}

	/**
	 * Get Widget Categories
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function get_categories() {
		return array( 'plus-creatives' );
	}

	/**
	 * Get Widget Keywords
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function get_keywords() {
		return array( 'morphing', 'morphing sections', 'blob section', 'blob builder', 'SVG Sections' );
	}

	/**
	 * Update is_reload_preview_required.
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	public function is_reload_preview_required() {
		return true;
	}

	/**
     * It is use for widget add in catch or not.
     *
     * @since 6.1.1
     */
    public function is_dynamic_content(): bool {
        return false;
    }
	
	/**
	 * Register controls.
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	protected function register_controls() {

		/** Content Section Start*/
		$this->start_controls_section(
			'content_section',
			array(
				'label' => esc_html__( 'Content', 'theplus' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'morph_layout',
			array(
				'label'   => esc_html__( 'Morphing Layout', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'normal',
				'options' => array(
					'normal'       => esc_html__( 'Normal ', 'theplus' ),
					'sec_bg'       => esc_html__( 'Section Background', 'theplus' ),
					'column_bg'    => esc_html__( 'Column Background', 'theplus' ),
					'fixed_scroll' => esc_html__( 'Fixed Scroll', 'theplus' ),
				),
			)
		);
		$this->start_controls_tabs( 'morph_width_height' );
		$this->start_controls_tab(
			'morph_mw_mh',
			array(
				'label' => esc_html__( 'Max-Size', 'theplus' ),
			)
		);
		$this->add_responsive_control(
			'morph_maxwidth',
			array(
				'label'     => esc_html__( 'Maximum Width', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 50,
						'max'  => 2000,
						'step' => 2,
					),
				),
				'selectors' => array(
					'.morph-{{ID}}.plus-morphing-svg-wrapper' => 'max-width: {{SIZE}}{{UNIT}};margin: 0 auto;',
				),
			)
		);
		$this->add_responsive_control(
			'morph_maxheight',
			array(
				'label'     => esc_html__( 'Maximum Height', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 20,
						'max'  => 1000,
						'step' => 2,
					),
				),
				'selectors' => array(
					'.morph-{{ID}}.plus-morphing-svg-wrapper' => 'max-height: {{SIZE}}{{UNIT}}',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'viebox_mw_mh',
			array(
				'label' => esc_html__( 'ViewBox Size', 'theplus' ),
			)
		);
		$this->add_responsive_control(
			'viewbox_width',
			array(
				'label' => esc_html__( 'ViewBox Width', 'theplus' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => array(
					'px' => array(
						'min'  => 50,
						'max'  => 2000,
						'step' => 2,
					),
				),
			)
		);
		$this->add_responsive_control(
			'viewbox_height',
			array(
				'label' => esc_html__( 'ViewBox Height', 'theplus' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => array(
					'px' => array(
						'min'  => 20,
						'max'  => 1000,
						'step' => 2,
					),
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_responsive_control(
			'morph_align',
			array(
				'label'     => esc_html__( 'Alignment', 'theplus' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'theplus' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'theplus' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'theplus' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default'   => 'center',
				'toggle'    => false,
				'separator' => 'before',
				'condition' => array(
					'morph_layout' => array( 'sec_bg', 'column_bg', 'fixed_scroll' ),
				),
			)
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'layouts',
			array(
				'label'   => esc_html__( 'Morphing Style', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1-a',
				'options' => array(
					'style-1-a' => esc_html__( 'Style 1-A', 'theplus' ),
					'style-1-b' => esc_html__( 'Style 1-B', 'theplus' ),
					'style-1-c' => esc_html__( 'Style 1-C', 'theplus' ),
					'style-2-a' => esc_html__( 'Style 2-A', 'theplus' ),
					'style-2-b' => esc_html__( 'Style 2-B', 'theplus' ),
					'style-2-c' => esc_html__( 'Style 2-C', 'theplus' ),
					'style-3-a' => esc_html__( 'Style 3-A', 'theplus' ),
					'style-3-b' => esc_html__( 'Style 3-B', 'theplus' ),
					'style-3-c' => esc_html__( 'Style 3-C', 'theplus' ),
					'style-3-d' => esc_html__( 'Style 3-D', 'theplus' ),
					'style-3-e' => esc_html__( 'Style 3-E', 'theplus' ),
					'style-4-a' => esc_html__( 'Style 4-A', 'theplus' ),
					'style-4-b' => esc_html__( 'Style 4-B', 'theplus' ),
					'style-4-c' => esc_html__( 'Style 4-C', 'theplus' ),
					'style-4-d' => esc_html__( 'Style 4-D', 'theplus' ),
					'custom'    => esc_html__( 'Custom Morphing', 'theplus' ),
				),
			)
		);
		$repeater->add_control(
			'custom_layouts',
			array(
				'label'       => esc_html__( 'Custom Morphing Code', 'theplus' ),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 5,
				'placeholder' => esc_html__( 'Morphing Custom Code', 'theplus' ),
				'condition'   => array(
					'layouts' => array( 'custom' ),
				),
			)
		);
		$repeater->add_control(
			'fixed_scroll_alt',
			array(
				'label'       => esc_html__( 'Fixed Scroll Alternate', 'theplus' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'none',
				'options'     => array(
					'none'      => esc_html__( 'Used Fixed Scroll', 'theplus' ),
					'style-1-a' => esc_html__( 'Style 1-A', 'theplus' ),
					'style-1-b' => esc_html__( 'Style 1-B', 'theplus' ),
					'style-1-c' => esc_html__( 'Style 1-C', 'theplus' ),
					'style-2-a' => esc_html__( 'Style 2-A', 'theplus' ),
					'style-2-b' => esc_html__( 'Style 2-B', 'theplus' ),
					'style-2-c' => esc_html__( 'Style 2-C', 'theplus' ),
					'style-3-a' => esc_html__( 'Style 3-A', 'theplus' ),
					'style-3-b' => esc_html__( 'Style 3-B', 'theplus' ),
					'style-3-c' => esc_html__( 'Style 3-C', 'theplus' ),
					'style-3-d' => esc_html__( 'Style 3-D', 'theplus' ),
					'style-3-e' => esc_html__( 'Style 3-E', 'theplus' ),
					'style-4-a' => esc_html__( 'Style 4-A', 'theplus' ),
					'style-4-b' => esc_html__( 'Style 4-B', 'theplus' ),
					'style-4-c' => esc_html__( 'Style 4-C', 'theplus' ),
					'style-4-d' => esc_html__( 'Style 4-D', 'theplus' ),
					'custom'    => esc_html__( 'Custom Morphing', 'theplus' ),
				),
				'description' => esc_html__( 'Note: If, enable (Fixed Scroll) scrolling option used for styles.', 'theplus' ),
				'separator'   => 'before',
			)
		);
		$repeater->add_control(
			'custom_layouts_alt',
			array(
				'label'       => esc_html__( 'Custom Alternate Morphing Code', 'theplus' ),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 5,
				'placeholder' => esc_html__( 'Morphing Custom Code', 'theplus' ),
				'condition'   => array(
					'fixed_scroll_alt' => array( 'custom' ),
				),
			)
		);
		$repeater->start_controls_tabs( 'add_options_tabs' );
		$repeater->start_controls_tab(
			'tab_path_option',
			array(
				'label' => esc_html__( 'Path', 'theplus' ),
			)
		);
		$repeater->add_control(
			'path_duration',
			array(
				'label'   => esc_html__( 'Path Duration', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 300,
						'max'  => 10000,
						'step' => 20,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 3000,
				),

			)
		);
		$repeater->add_control(
			'path_elasticity',
			array(
				'label'   => esc_html__( 'Elasticity', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 10,
						'max'  => 5000,
						'step' => 10,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 600,
				),

			)
		);
		$repeater->add_control(
			'path_easing',
			array(
				'label'   => esc_html__( 'Path Easing', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'easeOutElastic',
				'options' => $this->theplus_anime_animation_easing(),
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tab_svg_option',
			array(
				'label' => esc_html__( 'SVG', 'theplus' ),
			)
		);
		$repeater->add_control(
			'svg_duration',
			array(
				'label'   => esc_html__( 'SVG Duration', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 300,
						'max'  => 10000,
						'step' => 20,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 2000,
				),

			)
		);
		$repeater->add_control(
			'svg_easing',
			array(
				'label'   => esc_html__( 'SVG Easing', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'easeOutElastic',
				'options' => $this->theplus_anime_animation_easing(),
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tab_fill_option',
			array(
				'label' => esc_html__( 'Fill Color', 'theplus' ),
			)
		);
		$repeater->add_control(
			'fill_duration',
			array(
				'label'   => esc_html__( 'Fill Duration', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 10,
						'max'  => 5000,
						'step' => 20,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 500,
				),

			)
		);
		$repeater->add_control(
			'fill_easing',
			array(
				'label'   => esc_html__( 'Fill Easing', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'linear',
				'options' => $this->theplus_anime_animation_easing(),
			)
		);
		$repeater->add_control(
			'fill_color_loop',
			array(
				'label'       => esc_html__( 'Fill Color', 'theplus' ),
				'type'        => Controls_Manager::SWITCHER,
				'label_on'    => esc_html__( 'Yes', 'theplus' ),
				'label_off'   => esc_html__( 'No', 'theplus' ),
				'default'     => 'no',
				'description' => esc_html__( 'If, Select "Fixed Scroll" Morphing type then use on Fill Color.', 'theplus' ),
			)
		);
		$repeater->add_control(
			'fill_color',
			array(
				'label'     => esc_html__( 'Fill Color', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => array(
					'fill_color_loop' => 'yes',
				),
			)
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$repeater->add_control(
			'extra_options',
			array(
				'label'     => esc_html__( 'Additional Options', 'theplus' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$repeater->add_control(
			'scaleX',
			array(
				'label'   => esc_html__( 'ScaleX', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$repeater->add_control(
			'scaleY',
			array(
				'label'   => esc_html__( 'ScaleY', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$repeater->add_control(
			'rotate',
			array(
				'label'   => esc_html__( 'Rotate', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -360,
						'max'  => 360,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$repeater->add_control(
			'trans_x',
			array(
				'label'   => esc_html__( 'Horizontal Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$repeater->add_control(
			'trans_y',
			array(
				'label'   => esc_html__( 'Vertical Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'morphing_loop',
			array(
				'label'       => esc_html__( 'Svg Morphing Loop', 'theplus' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'layouts'          => 'style-1-a',
						'fixed_scroll_alt' => 'none',
					),
					array(
						'layouts'          => 'style-2-a',
						'fixed_scroll_alt' => 'none',
					),
				),
				'title_field' => '{{{ layouts }}}',
			)
		);
		$this->add_control(
			'morph_type',
			array(
				'label'     => esc_html__( 'Select Type', 'theplus' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'color',
				'options'   => array(
					'color'    => esc_html__( 'Color ', 'theplus' ),
					'gradient' => esc_html__( 'Gradient', 'theplus' ),
					'image'    => esc_html__( 'Image', 'theplus' ),
				),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'morph_color',
			array(
				'label'     => esc_html__( 'Fill Color', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => array(
					'morph_type' => array( 'color' ),
				),
			)
		);
		$this->add_control(
			'grad_x1',
			array(
				'label'     => esc_html__( 'Position X1', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 0,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_x2',
			array(
				'label'     => esc_html__( 'Position X2', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 100,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_y1',
			array(
				'label'     => esc_html__( 'Position Y1', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 70.5,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_y2',
			array(
				'label'     => esc_html__( 'Position Y2', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 100,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->start_controls_tabs( 'gradient_tabs' );
		$this->start_controls_tab(
			'tab_grad_color1',
			array(
				'label'     => esc_html__( 'Color 1', 'theplus' ),
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_color1',
			array(
				'label'     => esc_html__( 'Color 1', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_color1_offset',
			array(
				'label'     => esc_html__( 'Offset', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'%' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 0.5,
					),
				),
				'default'   => array(
					'unit' => '%',
					'size' => 0,
				),
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_grad_color2',
			array(
				'label'     => esc_html__( 'Color 2', 'theplus' ),
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_color2',
			array(
				'label'     => esc_html__( 'Color 2', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->add_control(
			'grad_color2_offset',
			array(
				'label'     => esc_html__( 'Offset', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'%' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 0.5,
					),
				),
				'default'   => array(
					'unit' => '%',
					'size' => 100,
				),
				'condition' => array(
					'morph_type' => array( 'gradient' ),
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'morph_image',
			array(
				'label'     => esc_html__( 'Masking Image', 'theplus' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
				'condition' => array(
					'morph_type' => array( 'image' ),
				),
			)
		);
		$this->add_control(
			'image_x',
			array(
				'label'     => esc_html__( 'Position X', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 0,
				'condition' => array(
					'morph_type' => array( 'image' ),
				),
			)
		);
		$this->add_control(
			'image_y',
			array(
				'label'     => esc_html__( 'Position Y', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 100,
				'step'      => 0.5,
				'default'   => 0,
				'condition' => array(
					'morph_type' => array( 'image' ),
				),
			)
		);
		$this->add_control(
			'image_dimension',
			array(
				'label'       => esc_html__( 'Image Dimension', 'theplus' ),
				'type'        => Controls_Manager::IMAGE_DIMENSIONS,
				'description' => esc_html__( 'Set custom width or height to keep the original size ratio.', 'theplus' ),
				'default'     => array(
					'width'  => '',
					'height' => '',
				),
				'condition'   => array(
					'morph_type' => array( 'image' ),
				),
			)
		);
		$this->add_control(
			'custom_morph_path_blobmaker',
			array(
				'label'       => esc_html__( 'Custom SVG from Blob Maker?', 'theplus' ),
				'type'        => Controls_Manager::SWITCHER,
				'label_on'    => esc_html__( 'Yes', 'theplus' ),
				'label_off'   => esc_html__( 'No', 'theplus' ),
				'default'     => 'no',
				'description' => 'If you are using custom SVG code from blob maker, Turn on this option.<a href="https://www.blobmaker.app/" target="_blank">Click</a>',
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'morphing_overflow',
			array(
				'label'        => esc_html__( 'Overflow Morphing', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Hidden', 'theplus' ),
				'label_off'    => esc_html__( 'Default', 'theplus' ),
				'default'      => 'hidden',
				'return_value' => 'hidden',
				'separator'    => 'before',
				'selectors'    => array(
					'.plus-morphing-svg-wrapper.morph-{{ID}}' => 'overflow: {{VALUE}}',
				),
			)
		);
		$this->add_control(
			'morph_fixed_scroll_bg',
			array(
				'label'     => esc_html__( 'Body Background', 'theplus' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'On', 'theplus' ),
				'label_off' => esc_html__( 'Off', 'theplus' ),
				'default'   => 'no',
				'separator' => 'before',
				'condition' => array(
					'morph_layout' => array( 'fixed_scroll' ),
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'fixed_scroll_bg',
				'label'     => esc_html__( 'Background', 'theplus' ),
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '.plus-morph-fixed-scroll-bg.morph-fixed-{{ID}}',
				'condition' => array(
					'morph_layout'          => array( 'fixed_scroll' ),
					'morph_fixed_scroll_bg' => array( 'yes' ),
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'morph_path_style',
			array(
				'label' => esc_html__( 'Morphing Style', 'theplus' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'hover_path',
			array(
				'label'     => esc_html__( 'Morphing Change Hover', 'theplus' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
				'condition' => array(
					'morph_layout' => array( 'normal' ),
				),
			)
		);
		$this->add_control(
			'duration',
			array(
				'label'   => esc_html__( 'Duration', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 300,
						'max'  => 10000,
						'step' => 20,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 3500,
				),

			)
		);
		$this->add_control(
			'morph_easing',
			array(
				'label'     => esc_html__( 'Easing', 'theplus' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'linear',
				'options'   => $this->theplus_anime_animation_easing(),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'adv_options',
			array(
				'label'     => esc_html__( 'Additional Options', 'theplus' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_control(
			'scaleX',
			array(
				'label'   => esc_html__( 'ScaleX', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$this->add_control(
			'scaleY',
			array(
				'label'   => esc_html__( 'ScaleY', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$this->add_control(
			'rotate',
			array(
				'label'   => esc_html__( 'Rotate', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -360,
						'max'  => 360,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'trans_x',
			array(
				'label'   => esc_html__( 'Horizontal Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'trans_y',
			array(
				'label'   => esc_html__( 'Vertical Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'masking_image_style',
			array(
				'label'     => esc_html__( 'Image Style', 'theplus' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'morph_type' => array( 'image' ),
				),
			)
		);
		$this->add_control(
			'image_duration',
			array(
				'label'   => esc_html__( 'Image Duration', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 300,
						'max'  => 10000,
						'step' => 20,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 800,
				),
			)
		);
		$this->add_control(
			'image_elasticity',
			array(
				'label'   => esc_html__( 'Image Elasticity', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0,
						'max'  => 2000,
						'step' => 10,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 300,
				),
			)
		);
		$this->start_controls_tabs( 'image_style_tabs' );
		$this->start_controls_tab(
			'tab_image_normal',
			array(
				'label' => esc_html__( 'Normal', 'theplus' ),
			)
		);
		$this->add_control(
			'image_scaleX',
			array(
				'label'   => esc_html__( 'ScaleX', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$this->add_control(
			'image_scaleY',
			array(
				'label'   => esc_html__( 'ScaleY', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 1,
				),
			)
		);
		$this->add_control(
			'image_rotate',
			array(
				'label'   => esc_html__( 'Rotate', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -360,
						'max'  => 360,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'image_trans_x',
			array(
				'label'   => esc_html__( 'Horizontal Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'image_trans_y',
			array(
				'label'   => esc_html__( 'Vertical Adjust', 'theplus' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default' => array(
					'unit' => '',
					'size' => 0,
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_image_hover',
			array(
				'label' => esc_html__( 'Hover', 'theplus' ),
			)
		);
		$this->add_control(
			'image_on_hover',
			array(
				'label'     => esc_html__( 'Image Hover', 'theplus' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
			)
		);
		$this->add_control(
			'image_hover_scaleX',
			array(
				'label'     => esc_html__( 'ScaleX', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default'   => array(
					'unit' => '',
					'size' => 1,
				),
				'condition' => array(
					'image_on_hover' => array( 'yes' ),
				),
			)
		);
		$this->add_control(
			'image_hover_scaleY',
			array(
				'label'     => esc_html__( 'ScaleY', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'' => array(
						'min'  => 0.6,
						'max'  => 3,
						'step' => 0.02,
					),
				),
				'default'   => array(
					'unit' => '',
					'size' => 1,
				),
				'condition' => array(
					'image_on_hover' => array( 'yes' ),
				),
			)
		);
		$this->add_control(
			'image_hover_rotate',
			array(
				'label'     => esc_html__( 'Rotate', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'' => array(
						'min'  => 0,
						'max'  => 360,
						'step' => 1,
					),
				),
				'default'   => array(
					'unit' => '',
					'size' => 0,
				),
				'condition' => array(
					'image_on_hover' => array( 'yes' ),
				),
			)
		);
		$this->add_control(
			'image_hover_trans_x',
			array(
				'label'     => esc_html__( 'Horizontal Adjust', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default'   => array(
					'unit' => '',
					'size' => 0,
				),
				'condition' => array(
					'image_on_hover' => array( 'yes' ),
				),
			)
		);
		$this->add_control(
			'image_hover_trans_y',
			array(
				'label'     => esc_html__( 'Vertical Adjust', 'theplus' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'' => array(
						'min'  => -500,
						'max'  => 500,
						'step' => 1,
					),
				),
				'default'   => array(
					'unit' => '',
					'size' => 0,
				),
				'condition' => array(
					'image_on_hover' => array( 'yes' ),
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	/**
	 * Render Morphing Layout
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	protected function render() {
		$settings  = $this->get_settings_for_display();
		$data_attr = '';

		$uid = uniqid( 'morph' );

		$data_class  = $uid;
		$data_class .= ' morph-' . esc_attr( $this->get_id() );
		$data_class .= ! empty( $settings['morph_align'] ) ? ' morph-' . esc_attr( $settings['morph_align'] ) : ' morph-center';

		$morph_layout = ! empty( $settings['morph_layout'] ) ? $settings['morph_layout'] : 'normal';
		$morph_type   = ! empty( $settings['morph_type'] ) ? $settings['morph_type'] : 'color';

		if ( 'sec_bg' === $morph_layout ) {
			$data_class .= ' morph-row';
			$data_attr  .= ' data-morphrow="yes"';
		}

		if ( 'column_bg' === $morph_layout ) {
			$data_class .= ' morph-column';
			$data_attr  .= ' data-morphcolumn="yes"';
		}

		if ( 'fixed_scroll' === $morph_layout ) {
			$data_class .= ' morph-fixed';
			$data_attr  .= ' data-morphfixed="yes"';
		}

		$data_attr .= ' data-id="' . esc_attr( $uid ) . '"';
		$data_attr .= ' data-morph-id="morph-' . esc_attr( $this->get_id() ) . '"';

		$i = 0;

		$json_arr = array();

		$first_morph_alt = '';

		$first_morph = '';
		$morph_style = '';
		if ( ! empty( $settings['morphing_loop'] ) ) {
			foreach ( $settings['morphing_loop'] as $index => $item ) {
				$fixed_scroll_alt = ! empty( $item['fixed_scroll_alt'] ) ? $item['fixed_scroll_alt'] : 'none';

				if ( 'custom' !== $item['layouts'] ) {
					if ( $i > 0 || ( 'fixed_scroll' === $morph_layout ) ) {
						$json_arr['path'][] = $this->get_morphing_style( $item['layouts'] );
					} elseif ( 0 == $i ) {
						$first_morph = $this->get_morphing_style( $item['layouts'] );
					}
					$morph_style = 'yes';
				} elseif ( $i > 0 || ( 'fixed_scroll' === $morph_layout ) ) {
					$json_arr['path'][] = wp_kses_post( $item['custom_layouts'] );
				} elseif ( 0 == $i && ( 'fixed_scroll' !== $morph_layout ) ) {
					$first_morph = wp_kses_post( $item['custom_layouts'] );
				}

				if ( 'custom' !== $fixed_scroll_alt && 'none' !== $fixed_scroll_alt ) {
					if ( $i > 0 || ( 'fixed_scroll' === $morph_layout ) ) {
						$json_arr['pathAlt'][] = $this->get_morphing_style( $fixed_scroll_alt );
					} elseif ( 0 == $i ) {
						$first_morph_alt = $this->get_morphing_style( $fixed_scroll_alt );
					}
				} elseif ( 'custom' === $fixed_scroll_alt ) {
					if ( $i > 0 || ( 'fixed_scroll' === $morph_layout ) ) {
						$json_arr['pathAlt'][] = $item['custom_layouts_alt'];
					} elseif ( 0 == $i && ( 'fixed_scroll' !== $morph_layout ) ) {
						$first_morph_alt = $item['custom_layouts_alt'];
					}
				}

				$json_arr['animation']['path']['duration'][] = ! empty( $item['path_duration']['size'] ) ? $item['path_duration']['size'] : 3000;
				$json_arr['animation']['path']['easing'][]   = ! empty( $item['path_easing'] ) ? $item['path_easing'] : 'easeOutElastic';

				$json_arr['animation']['path']['elasticity'][] = ! empty( $item['path_elasticity']['size'] ) ? $item['path_elasticity']['size'] : 600;

				$json_arr['animation']['svg']['duration'][] = ! empty( $item['svg_duration']['size'] ) ? $item['svg_duration']['size'] : 2000;
				$json_arr['animation']['svg']['easing'][]   = ! empty( $item['svg_easing'] ) ? $item['svg_easing'] : 'easeOutElastic';

				$json_arr['animation']['fill']['duration'][] = ! empty( $item['fill_duration']['size'] ) ? $item['fill_duration']['size'] : 500;
				$json_arr['animation']['fill']['easing'][]   = ! empty( $item['fill_easing'] ) ? $item['fill_easing'] : 'linear';

				if ( ! empty( $item['fill_color_loop'] ) && 'yes' === $item['fill_color_loop'] ) {
					$json_arr['animation']['fill']['color'][] = ! empty( $item['fill_color'] ) ? $item['fill_color'] : 'none';
				} else {
					$json_arr['animation']['fill']['color'][] = ! empty( $settings['morph_color'] ) ? $settings['morph_color'] : 'none';
				}

				$json_arr['animation']['scaleX'][] = ! empty( $item['scaleX']['size'] ) ? $item['scaleX']['size'] : 1;
				$json_arr['animation']['scaleY'][] = ! empty( $item['scaleY']['size'] ) ? $item['scaleY']['size'] : 1;
				$json_arr['animation']['rotate'][] = ! empty( $item['rotate']['size'] ) ? $item['rotate']['size'] : 0;

				$json_arr['animation']['tx'][] = ! empty( $item['trans_x']['size'] ) ? $item['trans_x']['size'] : 0;
				$json_arr['animation']['ty'][] = ! empty( $item['trans_y']['size'] ) ? $item['trans_y']['size'] : 0;

				++$i;
			}

			if ( 'fixed_scroll' !== $morph_layout ) {
				$json_arr['path'][] = $first_morph;

				if ( $first_morph_alt ) {
					$json_arr['pathAlt'][] = $first_morph_alt;
				}
			} else {
				$first_morph = $json_arr['path'][0];
			}
		}

		if ( ! empty( $settings['scaleX']['size'] ) ) {
			$json_arr['scaleX'] = $settings['scaleX']['size'];
		}

		if ( ! empty( $settings['scaleY']['size'] ) ) {
			$json_arr['scaleY'] = $settings['scaleY']['size'];
		}

		$json_arr['tx'] = ! empty( $settings['trans_x']['size'] ) ? $settings['trans_x']['size'] : 0;
		$json_arr['ty'] = ! empty( $settings['trans_y']['size'] ) ? $settings['trans_y']['size'] : 0;

		$json_arr['rotate'] = ! empty( $settings['rotate']['size'] ) ? $settings['rotate']['size'] : 0;
		$json_arr['easing'] = ! empty( $settings['morph_easing'] ) ? $settings['morph_easing'] : 'linear';

		$json_arr['duration'] = ! empty( $settings['duration']['size'] ) ? $settings['duration']['size'] : 3500;

		$json_arr['fill']['color']  = ! empty( $settings['morph_color'] ) ? $settings['morph_color'] : 'none';
		$json_arr['fill']['easing'] = 'linear';

		if ( 'normal' === $morph_layout ) {
			$json_arr['hover_path'] = ( ! empty( $settings['hover_path'] ) ) ? 'yes' : 'no';
		} else {
			$json_arr['hover_path'] = 'no';
		}

		$json_array = wp_json_encode( $json_arr );

		$morph_width  = ! empty( $settings['morph_maxwidth']['size'] ) ? $settings['morph_maxwidth']['size'] : 1200;
		$morph_height = ! empty( $settings['morph_maxheight']['size'] ) ? $settings['morph_maxheight']['size'] : 550;

		$viewbox_width  = ! empty( $settings['viewbox_width']['size'] ) ? $settings['viewbox_width']['size'] : 600;
		$viewbox_height = ! empty( $settings['viewbox_height']['size'] ) ? $settings['viewbox_height']['size'] : 600;

		$data_attr .= ' data-morph-width="' . $morph_width . '"';
		$data_attr .= ! empty( $settings['morph_maxwidth_tablet']['size'] ) ? ' data-morph-wt="' . $settings['morph_maxwidth_tablet']['size'] . '"' : 'data-morph-width-tablet=""';
		$data_attr .= ! empty( $settings['morph_maxwidth_mobile']['size'] ) ? ' data-morph-wm="' . $settings['morph_maxwidth_mobile']['size'] . '"' : 'data-morph-width-mobile=""';
		$data_attr .= ' data-morph-height="' . $morph_height . '"';
		$data_attr .= ! empty( $settings['morph_maxheight_tablet']['size'] ) ? ' data-morph-ht="' . $settings['morph_maxheight_tablet']['size'] . '"' : 'data-morph-height-tablet=""';
		$data_attr .= ! empty( $settings['morph_maxheight_mobile']['size'] ) ? ' data-morph-hm="' . $settings['morph_maxheight_mobile']['size'] . '"' : 'data-morph-height-mobile=""';
		$data_attr .= ' data-viewbox-width="' . $viewbox_width . '"';
		$data_attr .= ! empty( $settings['viewbox_width_tablet']['size'] ) ? ' data-viewbox-wt="' . $settings['viewbox_width_tablet']['size'] . '"' : 'data-viewbox-width-tablet=""';
		$data_attr .= ! empty( $settings['viewbox_width_mobile']['size'] ) ? ' data-viewbox-wm="' . $settings['viewbox_width_mobile']['size'] . '"' : 'data-viewbox-width-mobile=""';
		$data_attr .= ' data-viewbox-height="' . $viewbox_height . '"';
		$data_attr .= ! empty( $settings['viewbox_height_tablet']['size'] ) ? ' data-viewbox-ht="' . $settings['viewbox_height_tablet']['size'] . '"' : 'data-viewbox-height-tablet=""';
		$data_attr .= ! empty( $settings['viewbox_height_mobile']['size'] ) ? ' data-viewbox-hm="' . $settings['viewbox_height_mobile']['size'] . '"' : 'data-viewbox-height-mobile=""';

		$shape_trasnform = '';
		if ( 'yes' === $morph_style || 'yes' === $settings['custom_morph_path_blobmaker'] ) {
			$shape_trasnform = ' transform="translate(300,300)"';
		}

		$fill_style = '';
		$image_clip = '';

		$clippath_st  = '';
		$clippath_end = '';
		$gradient_svg = '';

		$image_json_array = '';

		if ( 'gradient' === $morph_type ) {
			$grad_x1 = ! empty( $settings['grad_x1'] ) ? $settings['grad_x1'] . '%' : '0%';
			$grad_x2 = ! empty( $settings['grad_x2'] ) ? $settings['grad_x2'] . '%' : '100%';
			$grad_y1 = ! empty( $settings['grad_y1'] ) ? $settings['grad_y1'] . '%' : '70.711%';
			$grad_y2 = ! empty( $settings['grad_y2'] ) ? $settings['grad_y2'] . '%' : '100%';

			$grad_color1 = ! empty( $settings['grad_color1'] ) ? $settings['grad_color1'] : 'rgb(95,54,152)';
			$grad_color2 = ! empty( $settings['grad_color2'] ) ? $settings['grad_color2'] : 'rgb(247,109,138)';

			$grad_color1_offset = ! empty( $settings['grad_color1_offset']['size'] ) ? $settings['grad_color1_offset']['size'] . '%' : '0%';
			$grad_color2_offset = ! empty( $settings['grad_color2_offset']['size'] ) ? $settings['grad_color2_offset']['size'] . '%' : '100%';

			$gradient_svg = '<linearGradient id="mo_' . esc_attr( $this->get_id() ) . '" x1="' . esc_attr( $grad_x1 ) . '" x2="' . esc_attr( $grad_x2 ) . '" y1="' . esc_attr( $grad_y1 ) . '" y2="' . esc_attr( $grad_y2 ) . '"><stop offset="' . esc_attr( $grad_color1_offset ) . '" stop-color="' . esc_attr( $grad_color1 ) . '" stop-opacity="1" /><stop offset="' . esc_attr( $grad_color2_offset ) . '" stop-color="' . esc_attr( $grad_color2 ) . '" stop-opacity="1" /></linearGradient>';
			$fill_style   = 'style="fill:url(#mo_' . esc_attr( $this->get_id() ) . ');"';

		} elseif ( 'image' === $morph_type ) {
			$image_x = ! empty( $settings['image_x']['size'] ) ? $settings['image_x']['size'] . '%' : '0';
			$image_y = ! empty( $settings['image_y']['size'] ) ? $settings['image_y']['size'] . '%' : '0';

			$morph_image  = ! empty( $settings['morph_image']['url'] ) ? $settings['morph_image']['url'] : '';
			$image_width  = ! empty( $settings['image_dimension']['width'] ) ? $settings['image_dimension']['width'] . 'px' : '100%';
			$image_height = ! empty( $settings['image_dimension']['height'] ) ? $settings['image_dimension']['height'] . 'px' : '100%';

			$image_json = array();

			$image_json['scaleX'] = ! empty( $settings['image_scaleX']['size'] ) ? $settings['image_scaleX']['size'] : 1;
			$image_json['scaleY'] = ! empty( $settings['image_scaleY']['size'] ) ? $settings['image_scaleY']['size'] : 1;
			$image_json['rotate'] = ! empty( $settings['image_rotate']['size'] ) ? $settings['image_rotate']['size'] : 0;

			$image_json['trans_x']  = ! empty( $settings['image_trans_x']['size'] ) ? $settings['image_trans_x']['size'] : 0;
			$image_json['trans_y']  = ! empty( $settings['image_trans_y']['size'] ) ? $settings['image_trans_y']['size'] : 0;
			$image_json['duration'] = ! empty( $settings['image_duration']['size'] ) ? $settings['image_duration']['size'] : 800;

			$image_json['elasticity']  = ! empty( $settings['image_elasticity']['size'] ) ? $settings['image_elasticity']['size'] : 300;
			$image_json['image_hover'] = ! empty( $settings['image_on_hover'] ) ? 'yes' : 'no';

			$image_hover = '';

			if ( 'yes' === $settings['image_on_hover'] ) {
				$image_json['hover_scaleX'] = ! empty( $settings['image_hover_scaleX']['size'] ) ? $settings['image_hover_scaleX']['size'] : 1;
				$image_json['hover_scaleY'] = ! empty( $settings['image_hover_scaleY']['size'] ) ? $settings['image_hover_scaleY']['size'] : 1;
				$image_json['hover_rotate'] = ! empty( $settings['image_hover_rotate']['size'] ) ? $settings['image_hover_rotate']['size'] : 0;

				$image_json['hover_trans_x'] = ! empty( $settings['image_hover_trans_x']['size'] ) ? $settings['image_hover_trans_x']['size'] : 0;
				$image_json['hover_trans_y'] = ! empty( $settings['image_hover_trans_y']['size'] ) ? $settings['image_hover_trans_y']['size'] : 0;
			}

			$image_json_array = wp_json_encode( $image_json );

			$clippath_st  = '<clipPath id="mo_' . esc_attr( $this->get_id() ) . '">';
			$clippath_end = '</clipPath>';

			$image_clip = '<g clip-path="url(#mo_' . esc_attr( $this->get_id() ) . ')"><image class="morph-image" xlink:href="' . esc_url( $morph_image ) . '" x="' . esc_attr( $image_x ) . '" y="' . esc_attr( $image_y ) . '" height="' . esc_attr( $image_height ) . '" width="' . esc_attr( $image_width ) . '" ></image></g>';
		} else {
			$fill_style = 'style="fill:' . esc_attr( $settings['morph_color'] ) . '"';
		}

		$output  = '<div class="plus-morphing-svg-wrapper ' . $data_class . '" id="' . esc_attr( $uid ) . '" ' . $data_attr . ' data-morph=\'' . $json_array . '\' data-morphimage=\'' . $image_json_array . '\'>';
		$output .= '<svg class="morph" width="' . esc_attr( $morph_width ) . '" height="' . esc_attr( $morph_height ) . '" viewBox="0 0 ' . esc_attr( $viewbox_width ) . ' ' . esc_attr( $viewbox_height ) . '">';
		$output .= $clippath_st . $gradient_svg . '<path ' . $fill_style . ' d="' . $first_morph . '" ' . $shape_trasnform . '  />' . $clippath_end . $image_clip;
		$output .= '</svg>';
		$output .= '</div>';

		if ( 'yes' === $settings['morph_fixed_scroll_bg'] && 'fixed_scroll' === $morph_layout ) {
			$output .= '<div class="plus-morph-fixed-scroll-bg morph-fixed-' . esc_attr( $this->get_id() ) . '" id="fixed' . esc_attr( $uid ) . '" data-id="fixed' . esc_attr( $uid ) . '" data-morph-fixed="morph-fixed-' . esc_attr( $this->get_id() ) . '"></div>';
		}

		echo $output;
	}

	/**
	 * Render Morphing style
	 *
	 * @since 2.0.0
	 *
	 * @param string $style The attribute slug for style.
	 *
	 * @version 5.4.2
	 */
	protected function get_morphing_style( $style = '' ) {
		$output = '';

		if ( 'style-1-a' === $style ) {
			$output = 'M139.6,-155.2C177.7,-134.5,203.1,-87.4,209.5,-38.8C215.8,9.8,203.2,59.9,176.3,97.5C149.5,135,108.4,160.1,61.3,183.9C14.3,207.7,-38.9,230.2,-82,217.8C-125.1,205.4,-158.3,157.9,-186.1,108.2C-213.9,58.4,-236.5,6.4,-228.1,-40.1C-219.8,-86.6,-180.6,-127.6,-137.4,-147.5C-94.3,-167.4,-47.1,-166.2,1.8,-168.3C50.8,-170.5,101.6,-176,139.6,-155.2Z';
		}

		if ( 'style-1-b' === $style ) {
			$output = 'M108.5,-128.3C141.2,-101.9,168.6,-68.2,192.8,-20.7C217,26.799999999999997,238,88.1,215.2,121C192.4,153.9,125.8,158.2,68.9,170.9C12.1,183.6,-35,204.5,-76.6,195.8C-118.2,187,-154.4,148.5,-171.9,105.4C-189.4,62.3,-188.3,14.7,-187.5,-40.6C-186.7,-95.8,-186.2,-158.6,-155,-185.3C-123.8,-211.9,-61.9,-202.5,-12,-188.2C37.9,-173.9,75.8,-154.7,108.5,-128.3Z';
		}

		if ( 'style-1-c' === $style ) {
			$output = 'M128.8,-150.8C171.5,-117.7,213.8,-81.4,224.7,-37C235.7,7.4,215.3,60,185.4,102.7C155.6,145.5,116.3,178.5,75.7,181.8C35.2,185.1,-6.5,158.8,-58.6,146.2C-110.7,133.7,-173.1,134.8,-200.9,106.4C-228.6,78,-221.6,20.1,-212.3,-38.2C-202.9,-96.5,-191.1,-155.1,-155.3,-189.5C-119.6,-223.8,-59.8,-233.9,-8.4,-224C43.1,-214,86.1,-184,128.8,-150.8Z';
		}

		if ( 'style-2-a' === $style ) {
			$output = 'M133.1,-145.1C173.6,-124.6,208.4,-83.7,215.8,-38.6C223.1,6.6,202.9,56,175.6,99.5C148.3,143,113.8,180.5,74.3,187.7C34.9,194.8,-9.6,171.7,-51.8,152.1C-94,132.5,-134.1,116.5,-155.9,86.3C-177.8,56.1,-181.5,11.7,-174.8,-31.7C-168.2,-75.1,-151.3,-117.6,-120.4,-139.8C-89.6,-162.1,-44.8,-164,0.6999999999999993,-164.9C46.3,-165.8,92.6,-165.6,133.1,-145.1Z';
		}

		if ( 'style-2-b' === $style ) {
			$output = 'M130.3,-151.9C173.1,-119.3,215.1,-82.3,226.4,-37.1C237.8,8.1,218.5,61.6,191.9,113.9C165.4,166.3,131.6,217.5,86.2,231.9C40.8,246.2,-16.2,223.6,-74.6,203.2C-133.1,182.7,-193,164.4,-208,126C-223.1,87.7,-193.3,29.4,-179,-28.1C-164.7,-85.6,-165.9,-142.4,-138.7,-177.8C-111.4,-213.1,-55.7,-227.1,-6,-219.9C43.7,-212.8,87.4,-184.5,130.3,-151.9Z';
		}

		if ( 'style-2-c' === $style ) {
			$output = 'M110.8,-147.7C135.9,-111,143.3,-68.8,151.8,-26C160.2,16.8,169.7,60.1,152.4,86C135.1,111.9,91,120.3,46,144.6C1,168.8,-44.8,208.9,-75.1,200.5C-105.5,192,-120.3,135,-149,85.8C-177.7,36.5,-220.3,-4.9,-224.1,-49.2C-227.8,-93.5,-192.6,-140.6,-148.8,-174C-105,-207.5,-52.5,-227.2,-4.8,-221.5C42.9,-215.7,85.7,-184.5,110.8,-147.7Z';
		}

		if ( 'style-3-a' === $style ) {
			$output = 'M152.5,-211.8C189.5,-183.1,205.5,-127.6,214.5,-75.5C223.5,-23.4,225.4,25.2,206.9,62.6C188.4,99.9,149.4,126,111.6,160.9C73.7,195.7,36.8,239.4,1.2,237.7C-34.5,236.1,-69,189.3,-109.2,155.2C-149.5,121.1,-195.5,99.8,-214,64.5C-232.4,29.2,-223.2,-20.2,-204.1,-62.4C-185,-104.6,-156,-139.7,-120.3,-168.8C-84.6,-197.8,-42.3,-220.9,7.7,-231.6C57.8,-242.2,115.6,-240.4,152.5,-211.8Z';
		}

		if ( 'style-3-b' === $style ) {
			$output = 'M125.3,-166C167.2,-142.1,209.1,-111.8,216,-74.1C222.9,-36.4,194.6,8.899999999999999,169.7,45.6C144.7,82.4,122.9,110.8,95.1,134.9C67.4,159.1,33.7,179.1,-8.2,190.4C-50.2,201.7,-100.3,204.4,-128.5,180.4C-156.7,156.4,-163,105.7,-162.5,63.2C-162,20.7,-154.7,-13.6,-153.8,-60.4C-152.9,-107.2,-158.5,-166.4,-133.9,-196C-109.3,-225.5,-54.7,-225.2,-6.5,-216.3C41.7,-207.4,83.5,-189.9,125.3,-166Z';
		}

		if ( 'style-3-c' === $style ) {
			$output = 'M105.4,-155.3C130.2,-127.2,139.3,-87.7,153,-48.9C166.8,-10.100000000000001,185.1,28,176.6,58.3C168,88.6,132.5,111,98.6,141.5C64.7,172,32.3,210.5,-2.8999999999999995,214.5C-38.2,218.6,-76.4,188.2,-101.6,154.9C-126.8,121.6,-139,85.3,-164.9,44.4C-190.8,3.5,-230.5,-42.1,-227.1,-80.4C-223.8,-118.6,-177.4,-149.5,-132.4,-171.1C-87.4,-192.6,-43.7,-204.8,-1.7,-202.5C40.4,-200.2,80.7,-183.4,105.4,-155.3Z';
		}

		if ( 'style-3-d' === $style ) {
			$output = 'M138.9,-187C168.1,-170,171.5,-113.4,189.7,-60.8C208,-8.2,240.9,40.4,241.1,90.2C241.2,140,208.5,190.9,162.8,201.6C117.2,212.3,58.6,182.6,3.8999999999999995,177.2C-50.7,171.8,-101.5,190.7,-147.3,180.1C-193.1,169.5,-234,129.4,-244.3,82.9C-254.6,36.4,-234.3,-16.6,-203.8,-52.6C-173.4,-88.7,-132.9,-107.9,-97.2,-122.8C-61.5,-137.7,-30.8,-148.3,12,-164.9C54.9,-181.5,109.7,-204,138.9,-187Z';
		}

		if ( 'style-3-e' === $style ) {
			$output = 'M133.3,-199.9C158.8,-164.9,156,-107.3,174.7,-55.4C193.4,-3.5,233.6,42.7,225.6,75C217.5,107.3,161.1,125.7,115.4,139C69.8,152.3,34.9,160.7,0,160.7C-34.9,160.7,-69.8,152.3,-110.6,137.5C-151.5,122.6,-198.5,101.2,-215.4,66C-232.4,30.8,-219.4,-18.1,-196.4,-56.1C-173.4,-94.1,-140.5,-121.1,-106.1,-153.2C-71.7,-185.4,-35.9,-222.7,9,-235.1C53.9,-247.5,107.8,-235,133.3,-199.9Z';
		}

		if ( 'style-4-a' === $style ) {
			$output = 'M185.7,-143.4C221.3,-103.5,217.4,-27.4,193.8,31.5C170.3,90.5,127,132.2,76.3,155.4C25.6,178.7,-32.5,183.5,-91.2,164.7C-149.8,145.9,-209,103.6,-228,45C-247,-13.7,-225.9,-88.5,-181.2,-130.5C-136.6,-172.6,-68.3,-181.8,3.4,-184.5C75.1,-187.2,150.1,-183.4,185.7,-143.4Z';
		}

		if ( 'style-4-b' === $style ) {
			$output = 'M169.1,-146.7C201.1,-94.7,196.6,-25.4,175.9,30.1C155.2,85.7,118.4,127.5,70.5,153.3C22.6,179,-36.4,188.6,-91.3,169.8C-146.2,151,-196.9,103.8,-207.7,49.4C-218.5,-4.9,-189.4,-66.4,-148.1,-120.5C-106.9,-174.5,-53.4,-221.3,7.6,-227.3C68.5,-233.3,137.1,-198.7,169.1,-146.7Z';
		}

		if ( 'style-4-c' === $style ) {
			$output = 'M96.8,-59.8C139.4,-23.8,197.4,17.3,200.1,61.8C202.8,106.4,150.2,154.6,98,164.8C45.8,175.1,-5.9,147.5,-38.3,117.3C-70.6,87.2,-83.6,54.6,-99.9,14C-116.2,-26.7,-135.9,-75.4,-119.8,-105.4C-103.7,-135.4,-51.9,-146.7,-12.4,-136.8C27.1,-126.9,54.2,-95.9,96.8,-59.8Z';
		}

		if ( 'style-4-d' === $style ) {
			$output = 'M67,-49.7C101.1,-10.6,152.9,18.1,154,44C155.1,69.9,105.6,93.1,66.7,95C27.9,97,-0.1,77.8,-51.7,68.1C-103.3,58.3,-178.4,58.1,-197.8,29.1C-217.2,0.1,-180.9,-57.6,-138.7,-98.6C-96.4,-139.6,-48.2,-163.8,-15.9,-151.1C16.4,-138.4,32.8,-88.9,67,-49.7Z';
		}

		return $output;
	}

	/**
	 * Get theplus_anime_animation_easing
	 *
	 * @since 2.0.0
	 */
	public function theplus_anime_animation_easing() {
		return array(
			'linear'           => esc_html__( 'Linear', 'theplus' ),
			'easeOutQuad'      => esc_html__( 'Ease-Out Quad', 'theplus' ),
			'easeInQuad'       => esc_html__( 'Ease-In Quad', 'theplus' ),
			'easeInOutQuad'    => esc_html__( 'Ease-InOut Quad', 'theplus' ),

			'easeOutCubic'     => esc_html__( 'Ease-Out Cubic', 'theplus' ),
			'easeInCubic'      => esc_html__( 'Ease-In Cubic', 'theplus' ),
			'easeInOutCubic'   => esc_html__( 'Ease-InOut Cubic', 'theplus' ),

			'easeOutQuart'     => esc_html__( 'Ease-Out Quart', 'theplus' ),
			'easeInQuart'      => esc_html__( 'Ease-In Quart', 'theplus' ),
			'easeInOutQuart'   => esc_html__( 'Ease-InOut Quart', 'theplus' ),

			'easeOutQuint'     => esc_html__( 'ease-Out Quint', 'theplus' ),
			'easeInQuint'      => esc_html__( 'ease-In Quint', 'theplus' ),
			'easeInOutQuint'   => esc_html__( 'ease-InOut Quint', 'theplus' ),

			'easeOutSine'      => esc_html__( 'Ease-Out Sine', 'theplus' ),
			'easeInSine'       => esc_html__( 'Ease-In Sine', 'theplus' ),
			'easeInOutSine'    => esc_html__( 'Ease-InOut Sine', 'theplus' ),

			'easeOutExpo'      => esc_html__( 'Ease-Out Expo', 'theplus' ),
			'easeInExpo'       => esc_html__( 'Ease-In Expo', 'theplus' ),
			'easeInOutExpo'    => esc_html__( 'Ease-InOut Expo', 'theplus' ),

			'easeOutElastic'   => esc_html__( 'Ease-Out Elastic', 'theplus' ),
			'easeInElastic'    => esc_html__( 'Ease-In Elastic', 'theplus' ),
			'easeInOutElastic' => esc_html__( 'Ease-InOut Elastic', 'theplus' ),

			'easeOutCirc'      => esc_html__( 'Ease-Out Circ', 'theplus' ),
			'easeInCirc'       => esc_html__( 'Ease-In Circ', 'theplus' ),
			'easeInOutCirc'    => esc_html__( 'Ease-InOut Circ', 'theplus' ),

			'easeOutBack'      => esc_html__( 'Ease-Out Back', 'theplus' ),
			'easeInBack'       => esc_html__( 'Ease-In Back', 'theplus' ),
			'easeInOutBack'    => esc_html__( 'Ease-InOut Back', 'theplus' ),

			'easeOutBounce'    => esc_html__( 'Ease-Out Bounce', 'theplus' ),
			'easeInBounce'     => esc_html__( 'Ease-In Bounce', 'theplus' ),
			'easeInOutBounce'  => esc_html__( 'Ease-InOut Bounce', 'theplus' ),
		);
	}

	/**
	 * Render content_template
	 *
	 * @since 2.0.0
	 * @version 5.4.2
	 */
	protected function content_template() {}
}
