Docs

Code snippets

Code snippets

Admin panel page with code snippets listed in categories.

CSS Background frost blur

SCSS Background frost blur

JS GSAP Animations

////////////////////////////
// GSAP Options & Plugins //
////////////////////////////

// Default lets you set properties that should be inherited by all tweens unless overridden by that tween.
gsap.defaults({
	ease: "power3.inOut",
	duration: 0.2,
});


// Registering a plugin with the GSAP core ensures that the two work seamlessly together and also prevents tree shaking issues.
// You only need to register a plugin once before using it. List multiple plugins to register:
gsap.registerPlugin(Draggable, ScrollTrigger, TextPlugin);

// Debug to log registered GSAP and plugins version
dct_debug('Registered GSAP', gsap.version, 'info');
dct_debug('Registered GSAP Draggable', Draggable.version, 'info');
dct_debug('Registered GSAP ScrollTrigger', ScrollTrigger.version, 'info');



// Inici pàgina llesta
/////////////////////////////////////
jQuery(document).ready( function($) {
	
	
	///*********************************///
	/// ANIMACIONS GSAP Scroll seccions ///
	///*********************************///
		
	/////////////////////////////////////////
	// Seccions amb SCROLL horitzontal gsap //
	/////////////////////////////////////////
	if ($('.seccio-scroll-horitzontal').length && is_frontend && is_asset_loaded('gsap'))  {
		
		// Afegir a grup responsive
		mm.add("(min-width: "+mm_breakpoint+"px)", () => {			

			// Posició inicial panells scroll horitzontal
			function panells_scroll_horitzontal_reset() {
				let pos_x = '45%';
				if ($(window).width() <= mm_breakpoint) { pos_x = '0'; }
				gsap.to($('.seccio-scroll-horitzontal .panell-scroll'), { x: pos_x, duration:0.2, ease:"power3.out" } );
				dct_debug('Actualitzada posició inicial '+pos_x+' de tots els panells scroll horitzontal');
			}
			panells_scroll_horitzontal_reset();
			// Actualitzar pos inicial on resize
			$(window).resize(function() {  panells_scroll_horitzontal_reset(); });

			// Per cada fila scroll horitzontal
			$('.seccio-scroll-horitzontal').each(function() {
				let $seccio = $(this),
					$panells = $(this).find(".panell-scroll");

				// Crear scroll horitzontal seccio
				gsap.to($panells, {
					xPercent: -100 * ($panells.length - 1),
					duration:0.2,
					ease: "none",
					scrollTrigger: {
						trigger: $seccio,
						toggleClass: 'panell-scroll-actiu',
						invalidateOnRefresh: true,
						pin: true,
						pinSpacing: true,
						start: "top center",
						end: "+="+($panells.length * 250),
						scrub: 0.2, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
						snap: {
							snapTo: 1 / ($panells.length - 1),
							duration: 0.7, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
							delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
							ease: "power3.inOut", // the ease of the snap animation ("power3" by default)
							directional: true,
							onComplete: function() { dct_debug('Scroll horitzontal Snap completat', $seccio); },
						},					
						// debug scroll
						markers: scrolltrigger_markers,
						onEnter: () => dct_debug("Scroll horitzontal enter", $seccio),
						onLeave: () => dct_debug("Scroll horitzontal leave", $seccio),
						onEnterBack: () => dct_debug("Scroll horitzontal enterBack", $seccio),
						onLeaveBack: () => dct_debug("Scroll horitzontal leaveBack", $seccio),
						//onToggle: self => dct_debug("Scroll horitzontal active: " + self.isActive, $seccio),
						//onUpdate: self => dct_debug("Scroll horitzontal progress: " + self.progress, $seccio)
					}
				});

				dct_debug('Enabled horizontal scroll section with '+$panells.length+' panels', $seccio);

			}); // Fi each seccio-panell-scroll-horitzontal

		}); // FI afegir a grup mm


	} // Fi tenim panells scroll horitzontal


	///////////////////////////////////
	// Seccions amb DRAG horitzontal //
	///////////////////////////////////
	if ($('.seccio-draggable-horitzontal').length && is_frontend && is_asset_loaded('Draggable'))  {
		
		// Crear un div per slider horitzontal amb els panells i fletxes
		$('.seccio-draggable-horitzontal').each(function() { 
			let $seccio = $(this),
				html_actual = $seccio.html(),
				fletxes_classe = 'slider-drag-fletxes';

			if ($seccio.hasClass('draggable-fletxes-inferior')) { fletxes_classe += ' fletxes-posicio-inferior'; }
			$seccio.html('<div class="'+fletxes_classe+'">' +
						 '<div class="slider-drag-fletxa-esq"><span></span></div>' +
						 '<div class="slider-drag-fletxa-dret"><span></span></div>' +
						 '</div>' +
						 '<div class="seccio-draggable-horitzontal-slider">'+html_actual+'</div>');
		});
		
		// A partir de secció calcula mides drag min/max
		function calcular_mides_seccio_draggable($seccio) {
			let $slider = $seccio.find('.seccio-draggable-horitzontal-slider'),
				$panells = $seccio.find('.panell-scroll');
			// Si no tenim panells utilitzar mòduls
			if ($panells.length < 1) {  $panells = $seccio.find('.et_pb_module'); }
			
			let panells_amplada = $panells.innerWidth(),
				panells_quant = $panells.length,
				amplada = panells_amplada * panells_quant,
				marge = panells_amplada * 1.25;

			let mides = { 'Panells quantitat': panells_quant,
						  'Panells amplada': panells_amplada,
						  'Amplada': amplada, 
						  'Marge': marge,
						  'Amplada min': -amplada + marge,
						  'Amplada max': $slider.innerWidth() - marge };
			return mides;
		}

		// Moure slider a dreta i esquerra amb btns
		function move_horizontal_section_draggable($seccio, $slider, move_to='right') {
			let mides = calcular_mides_seccio_draggable($seccio),
				pos_x = Math.round($slider.position().left),
				pos_limit = mides['Amplada max'];
			
			if (move_to.toLowerCase() === 'left') {
				pos_x = pos_x - mides['Panells amplada'];
				pos_limit = mides['Amplada min'];
				if (pos_x < pos_limit) { pos_x = pos_limit; }
			} else {
				move_to='right';
				pos_x = pos_x + mides['Panells amplada'];
				if (pos_x > pos_limit) { pos_x = pos_limit; }
			}
			// Move slider to pos_x
			gsap.to($slider, {  x: pos_x, duration:0.3, ease:'power3.out' } );
			dct_debug ('Move '+move_to.toLowerCase()+' horizontal dragabble section to position '+pos_x+'px (limit '+pos_limit+'px)', $slider);
		}

		// Afegir a grup responsive
		mm.add("(min-width: "+mm_breakpoint+"px)", () => {

			// Per cada secció draggable horitzontal
			$('.seccio-draggable-horitzontal').each(function() { 
				let $seccio = $(this),
					$slider = $seccio.find('.seccio-draggable-horitzontal-slider');

				let mides = calcular_mides_seccio_draggable($seccio);					
				
				// Pos inicial
				gsap.set($slider, { x: $seccio.innerWidth() * 0.2 });

				// Crear drag a slider
				let drag_horitzontal = Draggable.create($slider, {
					type: "x",
					bounds: { minX: mides['Amplada min'], maxX: mides['Amplada max'] },
					//bounds: $seccio,
					//trigger: $seccio, // child on permetre drag
					dragResistance:0.1,
					edgeResitance:0.9,
					allowContextMenu : true,
					//cursor: 'ew-resize',
					// Debug Draggable
					onClick: function () { 		dct_debug('Horizontal dragabble section onClick', mides); },
					onDragStart: function () { 	dct_debug('Horizontal dragabble section onDragStart direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
					//onDrag: function () { 	dct_debug('Horizontal dragabble section onDrag direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
					onDragEnd: function () { 	dct_debug('Horizontal dragabble section onDragEnd direction '+this.getDirection()+' '+Math.round(this.x)+'px', $slider); },
				});

				// Afegir interactivitat a fletxes esq/dret
				let $btn_esq = $seccio.find('.slider-drag-fletxa-esq'),
					$btn_dret = $seccio.find('.slider-drag-fletxa-dret');
				
				$btn_dret.on('click', function() { move_horizontal_section_draggable($seccio, $slider, move_to='right') });
				$btn_esq.on('click', function() {  move_horizontal_section_draggable($seccio, $slider, move_to='left') });

				dct_debug('Enabled horizontal draggable section with '+mides['Panells quantitat']+' panels', $seccio);

			}); // FI Cada secció draggable horitzontal
		
		}); // FI afegir a grup mm
	
	} // FI Seccions draggable horitzontal



	
	///////////////////////////////////////////
	// SECCIONS .fullheight scroll navegació //
	///////////////////////////////////////////
	if ($('#et-main-area .seccio-navegacio-fullheight').length && is_frontend && is_asset_loaded('gsap')) {
		
		// Recollir totes les seccions/row de la pàgiona que contenen .seccio-navegacio-fullheight
		let $seccions = $('#et-main-area .seccio-navegacio-fullheight'),
			marge_trigger = 10; // % viewport (top/bottom)
		
		// Activar seccions individuals	scroll	
		$seccions.each(function(i, seccio) {
			let $seccio = $(this);
			
			// Scrolltrigger inferior: anar a secció SEGÜENT
			ScrollTrigger.create({
				trigger: $seccio,
				start: "top "+(100-marge_trigger)+"%", // Quan top trigger arribi a 90% top viewport
				end: "+=5",
				onEnter: () => scroll_seccio_fullheight(i, true),								
				// debug scroll
				markers: scrolltrigger_markers,
				//onEnter: () => dct_debug("Scroll a secció anada "+i+" enter", $seccio),
				//onLeave: () => dct_debug("Scroll a secció anada "+i+" leave", $seccio),
				//onEnterBack: () => dct_debug("Scroll a secció anada "+i+" enterBack", $seccio),
				//onLeaveBack: () => dct_debug("Scroll a secció anada "+i+" leaveBack", $seccio),
				//onToggle: self => dct_debug("Scroll a secció anada "+i+" active: " + self.isActive, $seccio),
				//onUpdate: self => dct_debug("Scroll a secció anada "+i+" progress: " + self.progress, $seccio),
			});
			
			// Scrolltrigger inferior: anar a secció ANTERIOR
			ScrollTrigger.create({
				trigger: $seccio,
				start: "bottom "+marge_trigger+"%", // // Quan bottom trigger arribi a 10% top viewport
				end: "+=5",
				onEnterBack: () => scroll_seccio_fullheight(i, false),								
				// debug scroll
				markers: scrolltrigger_markers,
				//onEnter: () => dct_debug("Scroll a secció anada "+i+" enter", $seccio),
				//onLeave: () => dct_debug("Scroll a secció anada "+i+" leave", $seccio),
				//onEnterBack: () => dct_debug("Scroll a secció anada "+i+" enterBack", $seccio),
				//onLeaveBack: () => dct_debug("Scroll a secció anada "+i+" leaveBack", $seccio),
				//onToggle: self => dct_debug("Scroll a secció tornada "+i+" active: " + self.isActive, $seccio),
				//onUpdate: self => dct_debug("Scroll a secció anada "+i+" progress: " + self.progress, $seccio),
			});

			dct_debug('Enabled fullheight section '+i+' navigation', $seccio);
			
		}); // FI Cada secció scroll


		// Animació scroll anar a següent/anterior secció
		function scroll_seccio_fullheight(i, anim_entrada) {
			if (i < 0) { dct_debug('És la primera secció, no fem scroll a anterior', i); }
			else if (i > ($seccions.length-1)) { dct_debug('És la darrera secció, no fem scroll a següent', i); }			
			else {
				if (scrolling_animation === true) { dct_debug('Animació Scroll ACTIVA, no canviem secció.'); }
				else {
					let $seccio = $($seccions[i]);
					scroll_to_element($seccio);
					// Si és entrada o tornada
					if (anim_entrada === true) { dct_debug('Animació seccio '+i+' anada navegació fullheight',  $seccio); }
					else { 						 dct_debug('Animació secció '+i+' tornada navegació fullheight', $seccio); }
				}	
			}			
		}	
		dct_debug('Enabled navigation for '+$seccions.length+' fullheight sections', $seccions);
	
	} // FI Seccions .fullheight scroll
		

	/////////////////////////////
	// TICKER horitzontal loop //
	/////////////////////////////
	if ($('.fila-ticker-horitzontal').length && is_frontend && is_asset_loaded('gsap')) {
		// Recollir totes les seccions/row de la pàgina que contenen .fila-ticker-horitzontal
		let $tickers = $('.fila-ticker-horitzontal');

		// Activar files individuals ticker	
		$tickers.each(function(i, ticker) {
			let $ticker = $(this),
				$text =  $ticker.find('.et_pb_text_inner'),
				$ul = $text.find('ul');

			// Velocitat animació (temps per cada ul)
			let durada_anim = 20,
				copies_ul = 4,
				window_mida_actual = jQuery(window).width();
			if (window_mida_actual < 1200) { durada_anim = durada_anim*0.8; }
			if (window_mida_actual < 500) { durada_anim = durada_anim*0.6; }
			
			// Afegir X còpies de ul i calcular durada anim total
			for (let copia=0; copia < copies_ul; copia++) {
				$text.append($ul.clone());
			}
			$text = $ticker.find('.et_pb_text_inner');
			let durada_anim_total = durada_anim * copies_ul,
				pos_anim_final = -110 * (copies_ul+2);
			
			gsap.timeline({repeat:-1 } )
				.to($text,{ xPercent: pos_anim_final, duration: durada_anim_total, ease:'none' })
				.to($text, { xPercent:0, duration: 1, ease:'power3.inOut' });
			
			dct_debug('Enabled row with horizontal ticker with duration '+durada_anim_total+'s', $ticker);

		}); // FI Each fila ticker

	} // FI Fila ticker horitzontal loop


	////////////////////////////////////////
	// GSAP Draggable element dins secció //
	////////////////////////////////////////
	if ($('.element-draggable').length && is_frontend && is_asset_loaded('gsap')) {

		let $elements = $('.element-draggable');

		// Animació rotació segons direction drag
		function animacio_drag_rotacio_direccio($elem, direccio, drag_escala) {
			if (direccio.includes('right') || direccio.includes('up')) {
				gsap.to($elem, { scale:drag_escala, rotation: gsap.utils.random(5, 20, 1, true), duration:0.2, ease:'power3.inOut'} );
			} else {
				gsap.to($elem, { scale:drag_escala, rotation: gsap.utils.random(-5, -20, 1, true), duration:0.2, ease:'power3.inOut'} );
			}
		}
		
		// Per cada element arrossegable
		$elements.each(function(i, elem) {
			let $elem = $(elem),
				$seccio = $elem.closest('.et_pb_section'),
				drag_escala = 1.1,
				drag_dir = false;
			

			let drag_element = Draggable.create($elem, {
				type: "x,y", // "x", "y", "x,y", "rotation"
				bounds: $seccio,
				//trigger: $elem.find('.trigger-element'), // child on permetre drag
				dragResistance:0, // 0 - 1
				edgeResitance:0,  // 0 - 1
				allowContextMenu : true,

				deltaX:0,
				deltaY:0,
				//cursor: 'ew-resize',
				// Debug Draggable
				onClick: function () {
					gsap.timeline()
						.to($elem, { scale:drag_escala, rotation: 0, duration:0.2, ease:'back.out(2)'} )
						.to($elem, { scale:1, rotation: 0, duration:0.3, delay:1, ease:'back.out(2)'} );
					dct_debug('Draggable element onClick', $elem); 
				},
				onDragStart: function () { 	
					drag_dir = this.getDirection();
					animacio_drag_rotacio_direccio($elem, drag_dir, drag_escala);
					dct_debug('Draggable element onDragStart direction '+drag_dir+' '+Math.round(this.x)+'px', $elem); 
				},
				/*
				onDrag: function () { 
					// Afegir rotació segons direction drag
					if (this.getDirection() != drag_dir) {
						drag_dir = this.getDirection();
						animacio_drag_rotacio_direccio($elem, drag_dir, drag_escala);
					}					
					dct_debug('Draggable element onDrag direction '+this.getDirection()+' '+Math.round(this.x)+'px', $elem); 
				},
				*/
				onDragEnd: function () { 
					gsap.killTweensOf($elem);
					gsap.to($elem, { scale:1, rotation: 0, duration:0.3, delay:0.2, ease:'back.out(2)'} );
					dct_debug('Draggable element onDragEnd direction '+this.getDirection()+' '+Math.round(this.x)+'px', $elem); 
				},
			});

			dct_debug('Enabled draggable element', $elem);		
			dct_debug('Draggable element bounds', $seccio);		
		});

	} // FI Elements draggable


});

PHP Header meta viewport accessibility

PHP Images sizes

PHP SVG images media library upload support

PHP Search results post types

PHP Shortcode custom with options

PHP WooCommerce products grid adjustments

PHP WooCommerce single product gallery adjustments

← Help centerDevelopers →