trAvis - MANAGER

Edit File: theplus-shape-morph.js

this.isActive = false;
				this.animate();
				if(this.DOM.imageJSON.image_hover=='yes' || this.DOM.morph.hover_path=='yes'){
					
					this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
					this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
					this.DOM.el.addEventListener('touchstart', this.mouseenterFn);
					this.DOM.el.addEventListener('touchend', this.mouseleaveFn);
				}
			}
			
			getAnimeObj(targetStr) {
				const target = this.DOM[targetStr];								
				let animeOpts = {
					targets: target,
					duration: this.CONFIG.animation[targetStr].duration,
					delay: this.CONFIG.animation[targetStr].delay,
					easing: this.CONFIG.animation[targetStr].easing,
					
				};
				
				if( targetStr === 'path' ) {
					if(this.DOM.morph.hover_path=='yes'){
						animeOpts.d = this.isActive ? this.DOM.content_arr[0][0] : this.DOM.content_arr[0][1];
					}else{
						animeOpts.d = this.isActive ? this.DOM.content_arr[0] : this.DOM.content_arr[0];
					}
					if(this.DOM.morph.hover_path!='yes'){
						animeOpts.loop= true;
						animeOpts.fill={
							value: this.DOM.morph.fill.color,
							duration: 500,
							easing: this.DOM.morph.fill.easing
						};
						animeOpts.direction= 'alternate';
					}
				}
				
				if(targetStr === 'svg' || targetStr === 'image'){
					animeOpts.elasticity= this.CONFIG.animation[targetStr].elasticity;
					animeOpts.scaleX= this.isActive ? this.CONFIG.animation[targetStr].hover_scaleX : this.CONFIG.animation[targetStr].scaleX;
					animeOpts.scaleY= this.isActive ? this.CONFIG.animation[targetStr].hover_scaleY : this.CONFIG.animation[targetStr].scaleY;
					animeOpts.translateX= this.isActive ? this.CONFIG.animation[targetStr].hover_translateX : this.CONFIG.animation[targetStr].translateX;
					animeOpts.translateY= this.isActive ? this.CONFIG.animation[targetStr].hover_translateY : this.CONFIG.animation[targetStr].translateY;
					animeOpts.rotate= this.isActive ? this.CONFIG.animation[targetStr].hover_rotate : this.CONFIG.animation[targetStr].rotate;
				}
				anime.remove(target);
				return animeOpts;
			}
			initShapeLoop(pos,path,conn,connAlt,color,duration,easing){
				pos = pos || 0;
				anime.remove(path);
				anime({
					targets: path,
					easing: 'linear',
					d: [connAlt[0][pos], conn[0][pos]],
					loop: true,
					fill: {
						value: this.DOM.morph.animation.fill.color[pos],
						duration: this.DOM.morph.animation.fill.duration[pos],
						easing: this.DOM.morph.animation.fill.easing[pos]
					},
					direction: 'alternate'
				});
			}
			initShapeEl(){
				anime.remove(this.DOM.svg);
				anime({
					targets: this.DOM.svg,
					duration: 1,
					easing: 'linear',
					scaleX: this.DOM.morph.animation.scaleX[0],
					scaleY: this.DOM.morph.animation.scaleY[0],
					translateX: this.DOM.morph.animation.tx[0]+'px',
					translateY: this.DOM.morph.animation.ty[0]+'px',
					rotate: this.DOM.morph.animation.rotate[0]+'deg'
				});
			}
			createScrollWatchers() {
				var step=0;
				var totalEle=this.DOM.contentElemsTotal;
				var svg=this.DOM.svg;
				var path=this.DOM.path;
				const conn=this.DOM.content_arr;
				const connAlt=this.DOM.contentAlt;
				var Animation=this.DOM.morph.animation;
				var footer = document.querySelector('.theoutset-footer-main');
				var color =this.DOM.morph.fill.color;
				var duration =500;
				var easing =this.DOM.morph.fill.easing;
				this.initShapeEl();
				this.initShapeLoop(0,path,conn,connAlt,color,duration,easing);
				var position;
				this.DOM.contentElems.forEach((el,pos) => {
					
					const scrollElemToWatch = pos ? this.DOM.contentElems[pos] : this.DOM.contentElems[pos];
					pos = pos ? pos : totalEle;
					const watcher = scrollMonitor.create(scrollElemToWatch,-300);
					
					watcher.enterViewport(function() {
						step = pos;
						if(totalEle >= conn[0].length && pos+1 > conn[0].length){
							position=0;
						}else{
							position=pos;
						}
						anime.remove(path);
						anime({
							targets: path,
							duration: Animation.path.duration[position] || 2500,
							easing: Animation.path.easing[position] || 'linear',
							elasticity: Animation.path.elasticity[position] || 0,
							d: conn[0][position],
							fill: {
								value: Animation.fill.color[position],
								duration: Animation.fill.duration[position] || 500,
								easing: Animation.fill.easing[position] || 'linear'
							},
							complete: function() {
								position = position || 0;
								anime.remove(path);
								anime({
									targets: path,
									easing: 'linear',
									d: [connAlt[0][position], conn[0][position]],
									loop: true,
									fill: {
										value: Animation.fill.color[position],
										duration: Animation.fill.duration[position],
										easing: Animation.fill.easing[position]
									},
									direction: 'alternate'
								});
							}
						});
						
						anime.remove(svg);
						anime({
							targets: svg,
							duration: Animation.svg.duration[position],
							easing: Animation.svg.easing[position],
							elasticity: 0,
							scaleX: Animation.scaleX[position],
							scaleY: Animation.scaleY[position],
							translateX: Animation.tx[position]+'px',
							translateY: Animation.ty[position]+'px',
							rotate: Animation.rotate[position]+'deg'
						});
					});
					watcher.exitViewport(function() {
						var idx = !watcher.isAboveViewport ? pos-1 : pos+1;
						if( idx <= totalEle && step !== idx ) {							
							step = idx;
							if(totalEle > conn[0].length && idx+1 > conn[0].length){
								position=0;
							}else{
								position=idx;
							}
							anime.remove(path);
							anime({
								targets: path,
								duration: Animation.path.duration[position] || 2500,
								easing: Animation.path.easing[position] || 'linear',
								elasticity: Animation.path.elasticity[position] || 0,
								d: conn[0][position],
								fill: {
									value: Animation.fill.color[position],
									duration: Animation.fill.duration[position],
									easing: Animation.fill.easing[position]
								},
								complete: function() {
									position = position || 0;
									anime.remove(path);
									anime({
										targets: path,
										easing: 'linear',
										d: [connAlt[0][position], conn[0][position]],
										loop: true,
										fill: {
											value: Animation.fill.color[position],
											duration: Animation.fill.duration[position],
											easing: Animation.fill.easing[position]
										},
										direction: 'alternate'
									});
								}
							});
							anime.remove(svg);
							anime({
								targets: svg,
								duration: Animation.svg.duration[position],
								easing: Animation.svg.easing[position],
								elasticity: 0,
								scaleX: Animation.scaleX[position],
								scaleY: Animation.scaleY[position],
								translateX: Animation.tx[position]+'px',
								translateY: Animation.ty[position]+'px',
								rotate: Animation.rotate[position]+'deg'
							});
						}
					});
				});
			}
			animate() {
				anime(this.getAnimeObj('path'));
				anime(this.getAnimeObj('svg'));
				anime(this.getAnimeObj('image'));
			}
		}
		const items = Array.from(document.querySelectorAll('.'+ids));
		const init = (() => items.forEach(item => new MorphingLayouts(item)))();
	};
})(jQuery);