How to use animate method in wpt

Best JavaScript code snippet using wpt

autoanimate.js

Source:autoanimate.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

animations.js

Source:animations.js Github

copy

Full Screen

...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;...

Full Screen

Full Screen

Spinner.js

Source:Spinner.js Github

copy

Full Screen

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 )...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

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 ...

Full Screen

Full Screen

main.js

Source:main.js Github

copy

Full Screen

...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');...

Full Screen

Full Screen

box.js

Source:box.js Github

copy

Full Screen

...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,...

Full Screen

Full Screen

animate-in-out.jsx

Source:animate-in-out.jsx Github

copy

Full Screen

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 }...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

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-");...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org');3wpt.getLocations(function(err, data) {4 if (err) return console.error(err);5 console.log(data);6});7 if (err) return console.error(err);8 console.log(data);9});10wpt.getTestStatus('110111_1C_2', function(err, data) {11 if (err) return console.error(err);12 console.log(data);13});14wpt.getTestResults('110111_1C_2', function(err, data) {15 if (err) return console.error(err);16 console.log(data);17});18wpt.getTestResults('110111_1C_2', {breakdown: true}, function(err, data) {19 if (err) return console.error(err);20 console.log(data);21});22wpt.getTestResults('110111_1C_2', {requests: true}, function(err, data) {23 if (err) return console.error(err);24 console.log(data);25});26wpt.getTestResults('110111_1C_2', {pagespeed: true}, function(err, data) {27 if (err) return console.error(err);28 console.log(data);29});30wpt.getTestResults('110111_1C_2', {pagespeed: true, requests: true, breakdown: true}, function(err, data) {31 if (err) return console.error(err);32 console.log(data);33});34wpt.getTestResults('110111_1C_2', {pagespeed: true, requests: true, breakdown: true, medianMetric: true}, function(err, data) {35 if (err) return console.error(err);36 console.log(data);37});38wpt.getTestResults('110111_1C_2

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wpt = require('webpage').create();2wpt.viewportSize = {width: 800, height: 600};3 if (status === 'success') {4 wpt.render('google.png');5 wpt.evaluate(function() {6 document.body.bgColor = 'white';7 });8 wpt.render('google-white.png');9 wpt.evaluate(function() {10 $('body').animate({backgroundColor: 'black'}, 'slow');11 });12 wpt.render('google-black.png');13 wpt.close();14 });15 }16});17{18 "dependencies": {19 }20}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptexturize = require('wptexturize');2wptexturize.animate('text to animate');3wptexturize.animate('text to animate', options);4wptexturize.animate('text to animate', options, callback);5wptexturize.animate('text to animate', callback);6wptexturize.animate('text to animate', options, callback);7wptexturize.animate('text to animate', callback);8wptexturize.animate('text to animate', callback);9wptexturize.animate('text to animate', options, callback);10wptexturize.animate('text to animate', callback);11wptexturize.animate('text to animate', options, callback);12wptexturize.animate('text to animate', callback);13wptexturize.animate('text to animate', callback);14wptexturize.animate('text to animate', options, callback);15wptexturize.animate('text to animate', callback);16wptexturize.animate('text to animate', options, callback);17wptexturize.animate('text to animate', callback);18wptexturize.animate('text to animate', callback);19wptexturize.animate('text to animate', options, callback);20wptexturize.animate('text to animate', callback);21wptexturize.animate('text to animate', options, callback);22wptexturize.animate('text to animate', callback);23wptexturize.animate('text to animate', callback);24wptexturize.animate('text to animate', options, callback);25wptexturize.animate('text to animate', callback);26wptexturize.animate('text to animate', options, callback);27wptexturize.animate('text to animate', callback);28wptexturize.animate('text to animate', callback);29wptexturize.animate('text to animate', options, callback);30wptexturize.animate('text to animate', callback

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptools = require('wp-tools');2var wp = new wptools();3wp.animate('test.png', {4}, function(err, data) {5 if (err) {6 console.log(err);7 } else {8 console.log(data);9 }10});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptools = require('wptools');2wp.animate(function(err, out) {3 console.log(out);4});5var wptools = require('wptools');6wp.animate(function(err, out) {7 console.log(out);8});9var wptools = require('wptools');10wp.animate(function(err, out) {11 console.log(out);12});13var wptools = require('wptools');14wp.animate(function(err, out) {15 console.log(out);16});17var wptools = require('wptools');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptoolkit = require('wptoolkit');2var wp = new wptoolkit();3wp.animate('#wpbody-content', { opacity: 0.5 }, 5000, function() {4 console.log('animation complete');5});6var $ = require('jquery');7$('#wpbody-content').animate({ opacity: 0.5 }, 5000, function() {8 console.log('animation complete');9});10var $ = require('jquery');11var jqueryui = require('jquery-ui');12$('#wpbody-content').animate({ opacity: 0.5 }, 5000, function() {13 console.log('animation complete');14});15var $ = require('jquery');16var jqueryui = require('jquery-ui');17$('#wpbody-content').animate({ opacity: 0.5 }, 5000, function() {18 console.log('animation complete');19});20var $ = require('jquery');21var jqueryui = require('jquery-ui');22$('#wpbody-content').animate({ opacity: 0.5 }, 5000, function() {23 console.log('animation complete');24});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1wptexturize.animate('I am a text', 50, function() {2 console.log('I am done animating');3});4wptexturize.animate('I am a text', 50, function() {5 console.log('I am done animating');6});7wptexturize.animate('I am a text', 50, function() {8 console.log('I am done animating');9});10wptexturize.animate('I am a text', 50, function() {11 console.log('I am done animating');12});13wptexturize.animate('I am a text', 50, function() {14 console.log('I am done animating');15});16wptexturize.animate('I am a text', 50, function() {17 console.log('I am done animating');18});19wptexturize.animate('I am a text', 50, function() {20 console.log('I am done animating');21});22wptexturize.animate('I am a text', 50, function() {23 console.log('I am done animating');24});25wptexturize.animate('I am a text', 50, function() {26 console.log('I am done animating');27});28wptexturize.animate('I am a text', 50, function() {29 console.log('I am done animating');30});31wptexturize.animate('I am a text', 50, function() {32 console.log('I am done animating');33});34wptexturize.animate('I am a text', 50, function() {35 console.log('I am done animating');36});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptools = require("wptools");2var circle = wptools.circle();3circle.animate({4}, 1000);5circle.animate({6}, 1000);7circle.animate({8}, 1000);9circle.animate({10}, 1000);11circle.animate({12}, 1000);13circle.animate({14}, 1000);15circle.animate({16}, 1000);17circle.animate({18}, 1000);19circle.animate({20}, 1000);21circle.animate({22}, 1000);23circle.animate({

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1wptool.animate('mydiv', 'left', '0px', '100px', 1000);2wptool.animate('mydiv', 'top', '0px', '100px', 1000);3wptool.animate('mydiv', 'left', '0px', '100px', 1000);4wptool.animate('mydiv', 'top', '0px', '100px', 1000);5wptool.animate('mydiv', 'left', '0px', '100px', 1000);6wptool.animate('mydiv', 'top', '0px', '100px', 1000);7wptool.animate('mydiv', 'left', '0px', '100px', 1000);8wptool.animate('mydiv', 'top', '0px', '100px', 1000);

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful