How to use animate method in Cypress

1import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'2import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'3// Counter used to generate unique IDs for auto-animated elements4let autoAnimateCounter = 0;5/**6 * Automatically animates matching elements across7 * slides with the [data-auto-animate] attribute.8 */9export default class AutoAnimate {10	constructor( Reveal ) {11		this.Reveal = Reveal;12	}13	/**14	 * Runs an auto-animation between the given slides.15	 *16	 * @param  {HTMLElement} fromSlide17	 * @param  {HTMLElement} toSlide18	 */19	run( fromSlide, toSlide ) {20		// Clean up after prior animations21		this.reset();22		// Ensure that both slides are auto-animate targets23		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {24			// Create a new auto-animate sheet25			this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();26			let animationOptions = this.getAutoAnimateOptions( toSlide );27			// Set our starting state28			fromSlide.dataset.autoAnimate = 'pending';29			toSlide.dataset.autoAnimate = 'pending';30			// Flag the navigation direction, needed for fragment buildup31			let allSlides = this.Reveal.getSlides();32			animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';33			// Inject our auto-animate styles for this transition34			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {35				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );36			} );37			// Animate unmatched elements, if enabled38			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {39				// Our default timings for unmatched elements40				let defaultUnmatchedDuration = animationOptions.duration * 0.8,41					defaultUnmatchedDelay = animationOptions.duration * 0.2;42				this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {43					let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );44					let id = 'unmatched';45					// If there is a duration or delay set specifically for this46					// element our unmatched elements should adhere to those47					if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {48						id = 'unmatched-' + autoAnimateCounter++;49						css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );50					}51					unmatchedElement.dataset.autoAnimateTarget = id;52				}, this );53				// Our default transition for unmatched elements54				css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );55			}56			// Setting the whole chunk of CSS at once is the most57			// efficient way to do this. Using sheet.insertRule58			// is multiple factors slower.59			this.autoAnimateStyleSheet.innerHTML = css.join( '' );60			// Start the animation next cycle61			requestAnimationFrame( () => {62				if( this.autoAnimateStyleSheet ) {63					// This forces our newly injected styles to be applied in Firefox64					getComputedStyle( this.autoAnimateStyleSheet ).fontWeight;65					toSlide.dataset.autoAnimate = 'running';66				}67			} );68			this.Reveal.dispatchEvent({69				type: 'autoanimate',70				data: {71					fromSlide,72					toSlide,73					sheet: this.autoAnimateStyleSheet74				}75			});76		}77	}78	/**79	 * Rolls back all changes that we've made to the DOM so80	 * that as part of animating.81	 */82	reset() {83		// Reset slides84		queryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=""])' ).forEach( element => {85			element.dataset.autoAnimate = '';86		} );87		// Reset elements88		queryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => {89			delete element.dataset.autoAnimateTarget;90		} );91		// Remove the animation sheet92		if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {93			this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );94			this.autoAnimateStyleSheet = null;95		}96	}97	/**98	 * Creates a FLIP animation where the `to` element starts out99	 * in the `from` element position and animates to its original100	 * state.101	 *102	 * @param {HTMLElement} from103	 * @param {HTMLElement} to104	 * @param {Object} elementOptions Options for this element pair105	 * @param {Object} animationOptions Options set at the slide level106	 * @param {String} id Unique ID that we can use to identify this107	 * auto-animate element in the DOM108	 */109	autoAnimateElements( from, to, elementOptions, animationOptions, id ) {110		// 'from' elements are given a data-auto-animate-target with no value,111		// 'to' elements are are given a data-auto-animate-target with an ID112		from.dataset.autoAnimateTarget = '';113		to.dataset.autoAnimateTarget = id;114		// Each element may override any of the auto-animate options115		// like transition easing, duration and delay via data-attributes116		let options = this.getAutoAnimateOptions( to, animationOptions );117		// If we're using a custom element matcher the element options118		// may contain additional transition overrides119		if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;120		if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;121		if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;122		let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),123			toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );124		// Maintain fragment visibility for matching elements when125		// we're navigating forwards, this way the viewer won't need126		// to step through the same fragments twice127		if( to.classList.contains( 'fragment' ) ) {128			// Don't auto-animate the opacity of fragments to avoid129			// conflicts with fragment animations130			delete toProps.styles['opacity'];131			if( from.classList.contains( 'fragment' ) ) {132				let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];133				let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];134				// Only skip the fragment if the fragment animation style135				// remains unchanged136				if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {137					to.classList.add( 'visible', 'disabled' );138				}139			}140		}141		// If translation and/or scaling are enabled, css transform142		// the 'to' element so that it matches the position and size143		// of the 'from' element144		if( elementOptions.translate !== false || elementOptions.scale !== false ) {145			let presentationScale = this.Reveal.getScale();146			let delta = {147				x: ( fromProps.x - toProps.x ) / presentationScale,148				y: ( fromProps.y - toProps.y ) / presentationScale,149				scaleX: fromProps.width / toProps.width,150				scaleY: fromProps.height / toProps.height151			};152			// Limit decimal points to avoid 0.0001px blur and stutter153			delta.x = Math.round( delta.x * 1000 ) / 1000;154			delta.y = Math.round( delta.y * 1000 ) / 1000;155			delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;156			delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;157			let translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),158				scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );159			// No need to transform if nothing's changed160			if( translate || scale ) {161				let transform = [];162				if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );163				if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );164				fromProps.styles['transform'] = transform.join( ' ' );165				fromProps.styles['transform-origin'] = 'top left';166				toProps.styles['transform'] = 'none';167			}168		}169		// Delete all unchanged 'to' styles170		for( let propertyName in toProps.styles ) {171			const toValue = toProps.styles[propertyName];172			const fromValue = fromProps.styles[propertyName];173			if( toValue === fromValue ) {174				delete toProps.styles[propertyName];175			}176			else {177				// If these property values were set via a custom matcher providing178				// an explicit 'from' and/or 'to' value, we always inject those values.179				if( toValue.explicitValue === true ) {180					toProps.styles[propertyName] = toValue.value;181				}182				if( fromValue.explicitValue === true ) {183					fromProps.styles[propertyName] = fromValue.value;184				}185			}186		}187		let css = '';188		let toStyleProperties = Object.keys( toProps.styles );189		// Only create animate this element IF at least one style190		// property has changed191		if( toStyleProperties.length > 0 ) {192			// Instantly move to the 'from' state193			fromProps.styles['transition'] = 'none';194			// Animate towards the 'to' state195			toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;196			toProps.styles['transition-property'] = toStyleProperties.join( ', ' );197			toProps.styles['will-change'] = toStyleProperties.join( ', ' );198			// Build up our custom CSS. We need to override inline styles199			// so we need to make our styles vErY IMPORTANT!1!!200			let fromCSS = Object.keys( fromProps.styles ).map( propertyName => {201				return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';202			} ).join( '' );203			let toCSS = Object.keys( toProps.styles ).map( propertyName => {204				return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';205			} ).join( '' );206			css = 	'[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +207					'[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';208		}209		return css;210	}211	/**212	 * Returns the auto-animate options for the given element.213	 *214	 * @param {HTMLElement} element Element to pick up options215	 * from, either a slide or an animation target216	 * @param {Object} [inheritedOptions] Optional set of existing217	 * options218	 */219	getAutoAnimateOptions( element, inheritedOptions ) {220		let options = {221			easing: this.Reveal.getConfig().autoAnimateEasing,222			duration: this.Reveal.getConfig().autoAnimateDuration,223			delay: 0224		};225		options = extend( options, inheritedOptions );226		// Inherit options from parent elements227		if( element.parentNode ) {228			let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );229			if( autoAnimatedParent ) {230				options = this.getAutoAnimateOptions( autoAnimatedParent, options );231			}232		}233		if( element.dataset.autoAnimateEasing ) {234			options.easing = element.dataset.autoAnimateEasing;235		}236		if( element.dataset.autoAnimateDuration ) {237			options.duration = parseFloat( element.dataset.autoAnimateDuration );238		}239		if( element.dataset.autoAnimateDelay ) {240			options.delay = parseFloat( element.dataset.autoAnimateDelay );241		}242		return options;243	}244	/**245	 * Returns an object containing all of the properties246	 * that can be auto-animated for the given element and247	 * their current computed values.248	 *249	 * @param {String} direction 'from' or 'to'250	 */251	getAutoAnimatableProperties( direction, element, elementOptions ) {252		let config = this.Reveal.getConfig();253		let properties = { styles: [] };254		// Position and size255		if( elementOptions.translate !== false || elementOptions.scale !== false ) {256			let bounds;257			// Custom auto-animate may optionally return a custom tailored258			// measurement function259			if( typeof elementOptions.measure === 'function' ) {260				bounds = elementOptions.measure( element );261			}262			else {263				if( config.center ) {264					// More precise, but breaks when used in combination265					// with zoom for scaling the deck ¯\_(ツ)_/¯266					bounds = element.getBoundingClientRect();267				}268				else {269					let scale = this.Reveal.getScale();270					bounds = {271						x: element.offsetLeft * scale,272						y: element.offsetTop * scale,273						width: element.offsetWidth * scale,274						height: element.offsetHeight * scale275					};276				}277			}278			properties.x = bounds.x;279			properties.y = bounds.y;280			properties.width = bounds.width;281			properties.height = bounds.height;282		}283		const computedStyles = getComputedStyle( element );284		// CSS styles285		( elementOptions.styles || config.autoAnimateStyles ).forEach( style => {286			let value;287			// `style` is either the property name directly, or an object288			// definition of a style property289			if( typeof style === 'string' ) style = { property: style };290			if( typeof style.from !== 'undefined' && direction === 'from' ) {291				value = { value: style.from, explicitValue: true };292			}293			else if( typeof style.to !== 'undefined' && direction === 'to' ) {294				value = { value: style.to, explicitValue: true };295			}296			else {297				value = computedStyles[style.property];298			}299			if( value !== '' ) {300				properties.styles[style.property] = value;301			}302		} );303		return properties;304	}305	/**306	 * Get a list of all element pairs that we can animate307	 * between the given slides.308	 *309	 * @param {HTMLElement} fromSlide310	 * @param {HTMLElement} toSlide311	 *312	 * @return {Array} Each value is an array where [0] is313	 * the element we're animating from and [1] is the314	 * element we're animating to315	 */316	getAutoAnimatableElements( fromSlide, toSlide ) {317		let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;318		let pairs = matcher.call( this, fromSlide, toSlide );319		let reserved = [];320		// Remove duplicate pairs321		return pairs.filter( ( pair, index ) => {322			if( reserved.indexOf( pair.to ) === -1 ) {323				reserved.push( pair.to );324				return true;325			}326		} );327	}328	/**329	 * Identifies matching elements between slides.330	 *331	 * You can specify a custom matcher function by using332	 * the `autoAnimateMatcher` config option.333	 */334	getAutoAnimatePairs( fromSlide, toSlide ) {335		let pairs = [];336		const codeNodes = 'pre';337		const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';338		const mediaNodes = 'img, video, iframe';339		// Eplicit matches via data-id340		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {341			return node.nodeName + ':::' + node.getAttribute( 'data-id' );342		} );343		// Text344		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {345			return node.nodeName + ':::' + node.innerText;346		} );347		// Media348		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {349			return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );350		} );351		// Code352		this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {353			return node.nodeName + ':::' + node.innerText;354		} );355		pairs.forEach( pair => {356			// Disable scale transformations on text nodes, we transition357			// each individual text property instead358			if( matches( pair.from, textNodes ) ) {359				pair.options = { scale: false };360			}361			// Animate individual lines of code362			else if( matches( pair.from, codeNodes ) ) {363				// Transition the code block's width and height instead of scaling364				// to prevent its content from being squished365				pair.options = { scale: false, styles: [ 'width', 'height' ] };366				// Lines of code367				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {368					return node.textContent;369				}, {370					scale: false,371					styles: [],372					measure: this.getLocalBoundingBox.bind( this )373				} );374				// Line numbers375				this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-line[data-line-number]', node => {376					return node.getAttribute( 'data-line-number' );377				}, {378					scale: false,379					styles: [ 'width' ],380					measure: this.getLocalBoundingBox.bind( this )381				} );382			}383		}, this );384		return pairs;385	}386	/**387	 * Helper method which returns a bounding box based on388	 * the given elements offset coordinates.389	 *390	 * @param {HTMLElement} element391	 * @return {Object} x, y, width, height392	 */393	getLocalBoundingBox( element ) {394		const presentationScale = this.Reveal.getScale();395		return {396			x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,397			y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,398			width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,399			height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100400		};401	}402	/**403	 * Finds matching elements between two slides.404	 *405	 * @param {Array} pairs            	List of pairs to push matches to406	 * @param {HTMLElement} fromScope   Scope within the from element exists407	 * @param {HTMLElement} toScope     Scope within the to element exists408	 * @param {String} selector         CSS selector of the element to match409	 * @param {Function} serializer     A function that accepts an element and returns410	 *                                  a stringified ID based on its contents411	 * @param {Object} animationOptions Optional config options for this pair412	 */413	findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {414		let fromMatches = {};415		let toMatches = {};416		[].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {417			const key = serializer( element );418			if( typeof key === 'string' && key.length ) {419				fromMatches[key] = fromMatches[key] || [];420				fromMatches[key].push( element );421			}422		} );423		[].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {424			const key = serializer( element );425			toMatches[key] = toMatches[key] || [];426			toMatches[key].push( element );427			let fromElement;428			// Retrieve the 'from' element429			if( fromMatches[key] ) {430				const pimaryIndex = toMatches[key].length - 1;431				const secondaryIndex = fromMatches[key].length - 1;432				// If there are multiple identical from elements, retrieve433				// the one at the same index as our to-element.434				if( fromMatches[key][ pimaryIndex ] ) {435					fromElement = fromMatches[key][ pimaryIndex ];436					fromMatches[key][ pimaryIndex ] = null;437				}438				// If there are no matching from-elements at the same index,439				// use the last one.440				else if( fromMatches[key][ secondaryIndex ] ) {441					fromElement = fromMatches[key][ secondaryIndex ];442					fromMatches[key][ secondaryIndex ] = null;443				}444			}445			// If we've got a matching pair, push it to the list of pairs446			if( fromElement ) {447				pairs.push({448					from: fromElement,449					to: element,450					options: animationOptions451				});452			}453		} );454	}455	/**456	 * Returns a all elements within the given scope that should457	 * be considered unmatched in an auto-animate transition. If458	 * fading of unmatched elements is turned on, these elements459	 * will fade when going between auto-animate slides.460	 *461	 * Note that parents of auto-animate targets are NOT considerd462	 * unmatched since fading them would break the auto-animation.463	 *464	 * @param {HTMLElement} rootElement465	 * @return {Array}466	 */467	getUnmatchedAutoAnimateElements( rootElement ) {468		return [].slice.call( rootElement.children ).reduce( ( result, element ) => {469			const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );470			// The element is unmatched if471			// - It is not an auto-animate target472			// - It does not contain any auto-animate targets473			if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {474				result.push( element );475			}476			if( element.querySelector( '[data-auto-animate-target]' ) ) {477				result = result.concat( this.getUnmatchedAutoAnimateElements( element ) );478			}479			return result;480		}, [] );481	}...

...24$(AlturaSecao);25$(setSpacePageTwo); 26//Animando os primeiros itens quando a página iniciar27window.onload = function (){28$('#responsive').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 1000);29}30//detecta a direção do scroll e retorna-a31function detectMouseWheelDirection( e )32{33  var delta = null,34      direction = false35  ;36  if ( !e ) { // if the event is not provided, we get it from the window object37      e = window.event;38  }39if(e.wheelDelta >= 120 || e.wheelDelta <= -120){40  if ( e.wheelDelta ) { // will work in most cases41      delta = e.wheelDelta / 60;42  } else if ( e.detail ) { // fallback for Firefox43      delta = -e.detail / 2;44  }45  if ( delta !== null) {46      direction = delta > 0 ? 'up' : 'down';47  } 48}else if(e.wheelDelta === (e.deltaY * -3)){49  if ( e.wheelDelta ) {50      delta = e.wheelDelta;51  } else if ( e.detail ) { 52      delta = -e.detail;53  }54  if ( delta !== null) {55      direction = delta > 0 ? 'up' : 'down';56  }57}58  return direction;59}60//processa as informações da direção do scroll para disparar animações61function OnScroll(direction,valueY) {62    if(direction == 'down' && valueY < _AlturaDocumento && processamento == 0){63     animationsPageTwoDown();64      processamento = animatePageOneDown();65    }66   else if(direction == 'down' && processamento == 1 &&  valueY >= _AlturaDocumento ){ 67     animationsPageTwoFadeOut();68     processamento = animatePageTwoDown();69    }70    else if(direction == 'down' && processamento == 2 &&  valueY >= (_AlturaDocumento * 2) ){ 71     processamento = animatePageThreeDown();72    }73    else if(direction == 'up' && processamento == 1){74     processamento = animatePageOneUp();75    }76   else if(direction == 'up' && processamento == 2){ 77     animationsPageTwoUp();78     processamento = animatePageTwoUp();79    }80    else if(direction == 'up' && processamento == 3 ){ 81     processamento = animatePageThreeUp();82    }83   };84     85 // dispara o comando de animações para cada vez que um scroll é efetuado86 document.onwheel = function(e){87  OnScroll(detectMouseWheelDirection(e), window.pageYOffset);88}89//COMANDOS VOLTADOS AO TOUCH NUMA TELA90//dispara um comando que lê as posições de X e Y na tela91document.addEventListener('touchstart', function handleTouchStart(e) {92startX = e.changedTouches[0].screenX;93startY = e.changedTouches[0].screenY;94}, false);95let startX = 0;96let startY = 0;97//função que calcula a diferença entre o ponto inicial e o ponto final de um toque, retornando assim a direção do toque98function handleTouchEnd(e) {99const diffX = e.changedTouches[0].screenX - startX;100const diffY = e.changedTouches[0].screenY - startY;101const ratioX = Math.abs(diffX / diffY);102const ratioY = Math.abs(diffY / diffX);103const absDiff = Math.abs(ratioX > ratioY ? diffX : diffY);104// Ignore small movements.105if (absDiff < 10) {106 return;107}else{108return diffY  > 0 ? 'up' : 'down';;109}110}111//dispara a animação na tela, baseado na direção final do toque112document.addEventListener('touchend', function(event){113    114var direction = handleTouchEnd(event);115valueY = window.pageYOffset;116if(direction == 'down' && valueY < _AlturaDocumento && processamento == 0){117   processamento = animatePageOneDown();118 }119else if(direction == 'down' && processamento == 1 &&  valueY >= _AlturaDocumento ){ 120  animationsPageTwoDown();121  processamento = animatePageTwoDown();122}123else if (direction == 'down' && processamento == 2 && valueY >= (_AlturaDocumento * 2)) { 124  animationsPageTwoFadeOut();125  processamento = animatePageThreeDown();126 }127 else if(direction == 'down' && processamento == 3 &&  valueY >= (_AlturaDocumento * 3) ){ 128  processamento = animatePageFourDown();129 }130 else if(direction == 'up' && processamento == 1){131  processamento = animatePageOneUp();132 }133else if(direction == 'up' && processamento == 2){ 134  processamento = animatePageTwoUp();135 }136 else if(direction == 'up' && processamento == 3 ){ 137  animationsPageTwoUp();138  processamento = animatePageThreeUp();139 }140 else if(direction == 'up' && processamento == 4 ){ 141  animationsPageTwoUp();142  processamento = animatePageFourUp();143 }  144}, false);145  146 //Animações da página ao descer147 function animatePageOneDown(){148  var body = $('html, body');149  body.animate({scrollTop:  _AlturaDocumento}, '500');150  $('#responsive').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0}, 500);151  return processamento = 1;152 };153 function animatePageTwoDown(){154  var body = $('html, body');155  body.animate({scrollTop: _AlturaDocumento * 2}, '500');156  return processamento = 2;157 };158 function animatePageThreeDown(){159  var body = $('html, body');160  body.animate({scrollTop: _AlturaDocumento * 3}, '500');161  return processamento = 3;162 };163 function animatePageFourDown(){164  var body = $('html, body');165  body.animate({scrollTop: _AlturaDocumento * 4}, '500');166  return processamento = 4;167 };168function animationsPageTwoDown(){169  $('#firstAnimationPageTwo').css({opacity: 0.0, visibility: "visible",}).animate({opacity: 1.0}, 1000);170  $('#secondAnimationPageTwo').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 2000);171  $('#thirdAnimationPageTwo').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 3000);172}173function animationsPageTwoFadeOut(){174  $('#firstAnimationPageTwo').css({opacity: 1.0, visibility: "visible",}).animate({opacity: 0.0}, 200);175  $('#secondAnimationPageTwo').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0}, 200);176  $('#thirdAnimationPageTwo').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0}, 200);177}178 function animationsPageTwoUp(){179  $('#firstAnimationPageTwo').css({opacity: 0.0, visibility: "visible",}).animate({opacity: 1.0}, 3000);180  $('#secondAnimationPageTwo').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 2000);181  $('#thirdAnimationPageTwo').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 1000);182} 183 //Animações da página ao subir184 function animatePageOneUp(){185  var body = $('html, body');186  body.animate({scrollTop:  0}, '500');187  $('#responsive').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 1000);188  return processamento = 0;189 };190 function  animatePageTwoUp(){191  var body = $('html, body');192  body.animate({scrollTop: _AlturaDocumento}, '500');193  return processamento = 1;194 };195 function  animatePageThreeUp(){196  var body = $('html, body');197  body.animate({scrollTop: _AlturaDocumento * 2}, '500');198  return processamento = 2;199 };200 function  animatePageFourUp(){201  var body = $('html, body');202  body.animate({scrollTop: _AlturaDocumento * 3}, '500');203  return processamento = 3;...

1import {SpinnerIcon} from "./spinnerStyle";2export const Spinner = () => {3    return (4        <SpinnerIcon xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100"5                     preserveAspectRatio="xMidYMid">6            <g transform="translate(80,50)">7                <g transform="rotate(0)">8                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="1">9                        <animateTransform attributeName="transform" type="scale" begin="-0.875s" values="1.5 1.5;1 1"10                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>11                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"12                                 values="1;0" begin="-0.875s"></animate>13                    </circle>14                </g>15            </g>16            <g transform="translate(71.21320343559643,71.21320343559643)">17                <g transform="rotate(45)">18                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.875">19                        <animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.5 1.5;1 1"20                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>21                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"22                                 values="1;0" begin="-0.75s"></animate>23                    </circle>24                </g>25            </g>26            <g transform="translate(50,80)">27                <g transform="rotate(90)">28                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.75">29                        <animateTransform attributeName="transform" type="scale" begin="-0.625s" values="1.5 1.5;1 1"30                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>31                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"32                                 values="1;0" begin="-0.625s"></animate>33                    </circle>34                </g>35            </g>36            <g transform="translate(28.786796564403577,71.21320343559643)">37                <g transform="rotate(135)">38                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.625">39                        <animateTransform attributeName="transform" type="scale" begin="-0.5s" values="1.5 1.5;1 1"40                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>41                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"42                                 values="1;0" begin="-0.5s"></animate>43                    </circle>44                </g>45            </g>46            <g transform="translate(20,50.00000000000001)">47                <g transform="rotate(180)">48                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.5">49                        <animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.5 1.5;1 1"50                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>51                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"52                                 values="1;0" begin="-0.375s"></animate>53                    </circle>54                </g>55            </g>56            <g transform="translate(28.78679656440357,28.786796564403577)">57                <g transform="rotate(225)">58                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.375">59                        <animateTransform attributeName="transform" type="scale" begin="-0.25s" values="1.5 1.5;1 1"60                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>61                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"62                                 values="1;0" begin="-0.25s"></animate>63                    </circle>64                </g>65            </g>66            <g transform="translate(49.99999999999999,20)">67                <g transform="rotate(270)">68                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.25">69                        <animateTransform attributeName="transform" type="scale" begin="-0.125s" values="1.5 1.5;1 1"70                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>71                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"72                                 values="1;0" begin="-0.125s"></animate>73                    </circle>74                </g>75            </g>76            <g transform="translate(71.21320343559643,28.78679656440357)">77                <g transform="rotate(315)">78                    <circle cx="0" cy="0" r="7" fill="#1c4595" fillOpacity="0.125">79                        <animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1"80                                          keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>81                        <animate attributeName="fillOpacity" keyTimes="0;1" dur="1s" repeatCount="indefinite"82                                 values="1;0" begin="0s"></animate>83                    </circle>84                </g>85            </g>86        </SpinnerIcon>87    )...

2     $('#fullPage').fullpage({3         navigation: true,4         afterLoad: function(anchorLink, index) { //进入5             if (index == 1) {6                 $('.section1 .s1').animate({ 'bottom': '-120px', 'opacity': '1' }, 500);7                 $('.section1 .s2').animate({ 'bottom': '-199px', 'opacity': '1' }, 500);8                 $('.section1 .desc').animate({ 'top': '416px', 'opacity': '1' }, 500);9             }10             if (index == 2) {11                 $('.s2-img-2').animate({ 'left': '65px', 'opacity': '1' }, 500);12                 $('.s2-img-3').animate({ 'right': '149px', 'opacity': '1' }, 500);13                 $('.s2-img').animate({ 'bottom': '0px', 'opacity': '1' }, 500);14                 $('.section2 .desc').animate({ 'left': '420px', 'opacity': '1' }, 500);15                 $('.s2-title').animate({ 'opacity': '1' }, 500);16             }17             if (index == 3) {18                 $('.s3-1').animate({ 'bottom': '-95px', 'opacity': '1' }, 500);19                 $('.s3-2').animate({ 'bottom': '-95px', 'opacity': '1' }, 500);20                 $('.s3-3').animate({ 'bottom': '-95px', 'opacity': '1' }, 500);21                 $('.s3-title').animate({ 'height': '45px' }, 500);22                 $('.section3 .desc').animate({ 'width': '510px', 'opacity': '1' }, 500);23             }24             if (index == 4) {25                 $('.s4-1').animate({ 'opacity': '1', 'left': '190px' }, 500);26                 $('.s4-2').animate({ 'opacity': '1', 'left': '435px' }, 500);27                 $('.s4-3').animate({ 'opacity': '1', 'left': '725px' }, 500);28                 $('.s4-4').animate({ 'opacity': '1', 'right': '205px' }, 500);29                 $('.desc-1').animate({ 'opacity': '1', 'left': '150px' }, 500);30                 $('.desc-2').animate({ 'opacity': '1', 'left': '440px' }, 500);31                 $('.desc-3').animate({ 'opacity': '1', 'left': '720px' }, 500);32                 $('.desc-4').animate({ 'opacity': '1', 'left': '995px' }, 500);33                 $('.s4-title').animate({ 'height': '44px' }, 500);34             }35             if (index == 5) {36                 $('.s5-1').animate({ 'bottom': '0', 'opacity': '1' }, 500);37                 $('.s5-4').animate({ 'bottom': '150px', 'opacity': '1' }, 500);38                 $('.s5-2').animate({ 'bottom': '-70px', 'opacity': '1' }, 500);39                 $('.s5-3').animate({ 'bottom': '-209px', 'opacity': '1' }, 500);40             }41             if (index == 6) {42                 $('.btn').animate({ 'bottom': '150px', 'opacity': '1' }, 500);43                 $('.s6-1').animate({ 'opacity': '1', 'top': '335px' }, 500);44                 $('.s6-title').animate({ 'opacity': '1', 'top': '220px' }, 500);45             }46         },47         onLeave: function(index, nextIndex, direction) { //离开48             if (index == 1) {49                 $('.section1 .s1').animate({ 'bottom': '120px', 'opacity': '0' }, 500);50                 $('.section1 .s2').animate({ 'bottom': '199px', 'opacity': '0' }, 500);51                 $('.section1 .desc').animate({ 'top': '-416px', 'opacity': '0' }, 500);52             }53             if (index == 2) {54                 $('.s2-img-2').animate({ 'left': '-65px', 'opacity': '0' }, 500);55                 $('.s2-img-3').animate({ 'right': '-149px', 'opacity': '0' }, 500);56                 $('.s2-img').animate({ 'bottom': '-325px', 'opacity': '0' }, 500);57                 $('.section2 .desc').animate({ 'left': '-420px', 'opacity': '0' }, 500);58                 $('.s2-title').animate({ 'opacity': '0' }, 500);59             }60             if (index == 3) {61                 $('.s3-1').animate({ 'bottom': '0px', 'opacity': '0' }, 500);62                 $('.s3-2').animate({ 'bottom': '0px', 'opacity': '0' }, 500);63                 $('.s3-3').animate({ 'bottom': '0px', 'opacity': '0' }, 500);64                 $('.s3-title').animate({ 'height': '0px' }, 500);65                 $('.section3 .desc').animate({ 'width': '0px', 'opacity': '0' }, 500);66             }67             if (index == 4) {68                 $('.s4-1').animate({ 'opacity': '0', 'left': '250px' }, 500);69                 $('.s4-2').animate({ 'opacity': '0', 'left': '600px' }, 500);70                 $('.s4-3').animate({ 'opacity': '0', 'left': '600px' }, 500);71                 $('.s4-4').animate({ 'opacity': '0', 'right': '500px' }, 500);72                 $('.desc-1').animate({ 'opacity': '0', 'left': '250px' }, 500);73                 $('.desc-2').animate({ 'opacity': '0', 'left': '600px' }, 500);74                 $('.desc-3').animate({ 'opacity': '0', 'left': '550px' }, 500);75                 $('.desc-4').animate({ 'opacity': '0', 'left': '700px' }, 500);76                 $('.s4-title').animate({ 'height': '0' }, 500);77             }78             if (index == 5) {79                 $('.s5-1').animate({ 'bottom': '850px', 'opacity': '0' }, 500);80                 $('.s5-4').animate({ 'bottom': '850px', 'opacity': '0' }, 500);81                 $('.s5-2').animate({ 'bottom': '135px', 'opacity': '0' }, 500);82                 $('.s5-3').animate({ 'bottom': '0px', 'opacity': '0' }, 500);83             }84             if (index == 6) {85                 $('.btn').animate({ 'bottom': '0px', 'opacity': '0' }, 500);86                 $('.s6-1').animate({ 'opacity': '0', 'top': '500px' }, 500);87                 $('.s6-title').animate({ 'opacity': '0', 'top': '400px' }, 500);88             }89         }9091     });92
...

...7    var tofour = $('#tofour');8    var submit = $('button#submit');9    var menu = false;10    $('div#menu').hover(function () {11        gohome.animate({12            top: '+=195',13        });14        quest.animate({15            top: '+=135',16        });17        gotop.animate({18            top: '+=75',19        });20    }, function () {21        gohome.animate({22            top: '-=195',23        });24        quest.animate({25            top: '-=135',26        });27        gotop.animate({28            top: '-=75',29        });30    });31    gotop.click(function () {32        $('html,body').animate({33            scrollTop: $('body').offset().top34        }, 600);35    });36    gotop.hover(function () {37        $('.btn1-text').animate({38            left: '-=60',39        });40    }, function () {41        $('.btn1-text').animate({42            left: '+=60',43        });44    });45    quest.click(function () {46        $('.ques').animate({47            top: '50%',48            marginTop: '-380px',49        });50    });51    quest.hover(function () {52        $('.btn2-text').animate({53            left: '-=60',54        });55    }, function () {56        $('.btn2-text').animate({57            left: '+=60',58        });59    });60    gohome.click(function () {61        window.location.href = "index.html";62    });63    gohome.hover(function () {64        $('.btn3-text').animate({65            left: '-=60',66        });67    }, function () {68        $('.btn3-text').animate({69            left: '+=60',70        });71    });72    toone.click(function () {73        $('html,body').animate({74            scrollTop: $('#one').offset().top75        }, 600);76    });77    toone.hover(function () {78        $('.c1-ani').animate({79            top: '-=20',80            left: '-=20',81            opacity: '0.8'82        });83        $('.c1-tex').animate({84            top: '+=150',85            opacity: '1'86        });87    }, function () {88        $('.c1-ani').animate({89            top: '+=20',90            left: '+=20',91            opacity: '0'92        });93        $('.c1-tex').animate({94            top: '-=150',95            opacity: '0'96        });97    });98    totwo.click(function () {99        $('html,body').animate({100            scrollTop: $('#two').offset().top101        }, 600);102    });103    totwo.hover(function () {104        $('.c2-ani').animate({105            top: '-=20',106            left: '-=20',107            opacity: '0.8'108        });109        $('.c2-tex').animate({110            top: '+=150',111            opacity: '1'112        });113    }, function () {114        $('.c2-ani').animate({115            top: '+=20',116            left: '+=20',117            opacity: '0'118        });119        $('.c2-tex').animate({120            top: '-=150',121            opacity: '0'122        });123    });124    tothree.click(function () {125        $('html,body').animate({126            scrollTop: $('#three').offset().top127        }, 600);128    });129    tothree.hover(function () {130        $('.c3-ani').animate({131            top: '-=20',132            left: '-=20',133            opacity: '0.8'134        });135        $('.c3-tex').animate({136            top: '+=150',137            opacity: '1'138        });139    }, function () {140        $('.c3-ani').animate({141            top: '+=20',142            left: '+=20',143            opacity: '0'144        });145        $('.c3-tex').animate({146            top: '-=150',147            opacity: '0'148        });149    });150    tofour.click(function () {151        $('html,body').animate({152            scrollTop: $('#four').offset().top153        }, 600);154    });155    tofour.hover(function () {156        $('.c4-ani').animate({157            top: '-=20',158            left: '-=20',159            opacity: '0.8'160        });161        $('.c4-tex').animate({162            top: '+=150',163            opacity: '1'164        });165    }, function () {166        $('.c4-ani').animate({167            top: '+=20',168            left: '+=20',169            opacity: '0'170        });171        $('.c4-tex').animate({172            top: '-=150',173            opacity: '0'174        });175    });176    submit.click(function () {177        $('.ques').animate({178            marginTop: '0px',179            top: '-760px'180        });181        $('.questcomp').css('display', 'block');182    })183    $('.questcomp').click(function () {184        $(this).css('display', 'none');...

...48  const e = SVG.select('#box #e')49  // 右50  const f = SVG.select('#box #f')51  const g = SVG.select('#box #g')52  function animate(fraction, animateConfig) {53    const len = interpolate(fraction) * 70054    const config = {55      ease: '<>',56      duration: 1,57      // delay: 0,58      ...animateConfig,59    }60    // 上下61    a.animate(config).move(-len * 0.2, -len * 0.7)62    h.animate(config).move(len * 0.2, len * 0.8)63    // 前后64    b.animate(config).move(len * 0.5, -len * 0.3)65    d.animate(config).move(-len * 0.5, len * 0.3)66    // 左67    c.animate(config).move(-len, -len * 0.8)68    e.animate(config).move(-len * 0.5, 0)69    // 右70    f.animate(config).move(len * 0.7, len * 0.3)71    g.animate(config).move(len * 0.7, -len * 0.5)72  }73  ;74  (function debrisFloatAnimate() {75    SVG.select('#debris1 svg g').animate({76      duration: 5000,77    }).move(-Math.random() * 200, Math.random() * 70)78    SVG.select('#debris2 svg g').animate({79      duration: 5000,80    }).move(Math.random() * 140, Math.random() * 100)81    SVG.select('#debris3 svg g').animate({82      duration: 5000,83    }).move(Math.random() * 100, Math.random() * 100)84    setTimeout(debrisFloatAnimate, 8000)85  })()86  function calcDuration(percent) {87    return percent * 500088  }89  // init state90  animate(0.3)91  ;92  (function boxAnimate() {93    animate(0.7, {94      duration: calcDuration(0.4),95    })96    animate(0.3, {97      duration: calcDuration(0.4),98    })99    animate(0.8, {100      duration: calcDuration(0.5),101    })102    animate(0.4, {103      duration: calcDuration(0.4),104    })105    animate(1, {106      duration: calcDuration(0.6),107    })108    animate(0, {109      ease: '-',110      duration: 400,111      delay: 100,112    })113    // total = 2.3 * 5 + 0.4114    setTimeout(boxAnimate, 1000 * 16)115  })()116*/}117export {118  loadBoxSVG,119  boxAnimation,...

1// @flow2import React, { type Node } from 'react';3import type { InOutAnimationMode } from '../../types';4export type AnimateProvided = {|5  onClose: () => void,6  animate: InOutAnimationMode,7  data: mixed,8|};9type Props = {|10  on: mixed,11  shouldAnimate: boolean,12  children: (provided: AnimateProvided) => Node,13|};14type State = {|15  data: mixed,16  isVisible: boolean,17  animate: InOutAnimationMode,18|};19// Using a class here rather than hooks because20// getDerivedStateFromProps results in far less renders.21// Using hooks to implement this was quite messy and resulted in lots of additional renders22export default class AnimateInOut extends React.PureComponent<Props, State> {23  state: State = {24    isVisible: Boolean(this.props.on),25    data: this.props.on,26    // not allowing to animate close on mount27    animate: this.props.shouldAnimate && this.props.on ? 'open' : 'none',28  };29  static getDerivedStateFromProps(props: Props, state: State): State {30    if (!props.shouldAnimate) {31      return {32        isVisible: Boolean(props.on),33        data: props.on,34        animate: 'none',35      };36    }37    // need to animate in38    if (props.on) {39      return {40        isVisible: true,41        // have new data to animate in with42        data: props.on,43        animate: 'open',44      };45    }46    // need to animate out if there was data47    if (state.isVisible) {48      return {49        isVisible: true,50        // use old data for animating out51        data: state.data,52        animate: 'close',53      };54    }55    // close animation no longer visible56    return {57      isVisible: false,58      animate: 'close',59      data: null,60    };61  }62  onClose = () => {63    if (this.state.animate !== 'close') {64      return;65    }66    this.setState({67      isVisible: false,68    });69  };70  render() {71    if (!this.state.isVisible) {72      return null;73    }74    const provided: AnimateProvided = {75      onClose: this.onClose,76      data: this.state.data,77      animate: this.state.animate,78    };79    return this.props.children(provided);80  }...

1$(document).ready(function () {2    // Navbar3    $("#love").addClass("animate__animated animate__backInDown animate__delay-1s");4    $("#jes").addClass("animate__animated animate__fadeIn animate__delay-2s");5    $("#yan").addClass("animate__animated animate__fadeIn animate__delay-2s");6    $("#col1").addClass("animate__animated animate__fadeIn animate__delay-1s");7    $("#col2").addClass("animate__animated animate__fadeIn animate__delay-2s");8    $("#col3").addClass("animate__animated animate__fadeIn animate__delay-3s");9    $("#col4").addClass("animate__animated animate__fadeIn animate__delay-4s");10    $("#col5").addClass("animate__animated animate__fadeIn animate__delay-5s");11    $("#col6").addClass("animate__animated animate__fadeIn animate__delay-");...