How to use onRaf method in Puppeteer

Best JavaScript code snippet using puppeteer

video.js

Source:video.js

...214    try {215        clearTimeout( $this.data( "timeout" ) );216    } catch ( error ) {}217    onMoveScrub.call( this, e );218    function onRaf() {219        _rafId = raf( onRaf );220        var percent = _rafOffset / $this[ 0 ].clientWidth,221            time = percent * mediabox.getMediaProp( videoId, "duration" );222        $thumb[ 0 ].currentTime = time;223        translate3d( $thumb[ 0 ], px( _rafPosition ), 0, 0 );224    }225    _rafId = raf( onRaf );226    $this.addClass( "is-hovered" );227    $thumb.addClass( "is-active" );228},229onMoveScrub = function ( e ) {230    var $this = $( this ),231        $video = $this.closest( ".js-video" ),232        $progress = $this.find( ".js-video-progress" ),...

cut_it_out.js

Source:cut_it_out.js

...26        window.requestAnimationFrame(() => {27        const o = {}28        o.time = window.performance.now() / 100029        this.raf()30        if (this.onRaf) this.onRaf(o)31      })32    }33  }34  35  36  /*--------------------37  Canvas38  --------------------*/39  class Canvas extends Raf {40    constructor(obj) {41      super()42      this.canvas = document.getElementById(obj.id)43      this.ctx = this.canvas.getContext('2d')44      this.resize()45      this.events()46    }47    48    resize() {49      this.dpr = window.devicePixelRatio50      this.canvas.style.width = `${width}px`51      this.canvas.style.height = `${height}px`52      this.canvas.width = width * this.dpr53      this.canvas.height = height * this.dpr54    }55    56    events() {57      window.addEventListener('resize', this.resize)58    }59    60    getCtx() {61      return this.ctx62    }63    64    clear() {65      this.ctx.clearRect(0, 0, width * this.dpr, height * this.dpr)66    }67    68    onRaf() {69      this.clear()70    }71  }72  73  74  /*--------------------75  Trail76  --------------------*/77  class Trail extends Raf {78    constructor(obj) {79      super()80      Object.assign(this, obj)81      82      this.x = 083      this.y = 084      this.Trail = []85      86      this.binds()87      this.events()88    }89    90    binds() {91      ['handleMouse', 'events', 'tail'].forEach(e => this[e] = this[e].bind(this))92    }93    94    handleMouse(e) {95      this.x = this.dpr * (e.clientX || e.touches[0].clientX)96      this.y = this.dpr * (e.clientY || e.touches[0].clientY)97    }98    99    events() {100      ['mousemove', 'touchstart', 'touchmove']101        .forEach(e => {102            game_window.addEventListener(e, this.handleMouse)  103        })104    }105    106    tail() {107      this.Trail.unshift({x: this.x, y: this.y})108      if (this.Trail.length > this.length) {109        this.Trail.pop()110      }111    }112    113    draw() {114      this.ctx.strokeStyle = this.color115      this.ctx.lineCap = this.lineCap116      this.ctx.beginPath()117  118      this.Trail.forEach((el, i) => {119        this.ctx.lineWidth = this.dpr * mapRange(i, 0, this.length, this.strokeMax, this.strokeMin)120        const type = i === 0 ? 'moveTo' : 'lineTo'121        this.ctx.stroke()122        this.ctx[type](el.x, el.y)123      })124      125      if (this.fill) {126        this.ctx.fillStyle = 'rgba(0, 0, 0, 0)'127        this.ctx.fill()128      }129    }130    131    detect() {132      this.balls.forEach(ball => {133        const half = ball.size / 2134        const bound = {135          left: ball.x - half,136          top: ball.y - half,137          right: ball.x + half,138          bottom: ball.y + half139        }140        141        this.Trail.forEach(e => {142          const {x, y} = e143          if (x > bound.left && x < bound.right && y > bound.top && y < bound.bottom) {144            ball.explode()145          }146        })147      })148    }149    150    onRaf() {151      this.tail()152      this.detect()153      this.draw()154    }155  }156  157  /*--------------------158  Ball159  --------------------*/160  class Ball extends Raf {161    constructor(obj) {162      super()163      Object.assign(this, obj)164      this.regenerate()165      this.draw()166    }167    168    regenerate() {169      this.bomb = random(0, 10) > 8.5170  171      this.exploded = false172      this.color = this.bomb ? 'black' : `hsl(${random(0, 360)}, 80%, 60%)`173      this.size = random(this.sizeMin, this.sizeMax) * this.dpr174      this.x = random(this.size, (width * this.dpr) - this.size)175      this.y = -this.size176      this.acc = 0177      this.speed = 0178      this.ready = false179  180      setTimeout(() => {181        this.ready = true182      }, random(0, 2000))183    }184    185    draw() {186      this.ctx.fillStyle = this.color187      this.ctx.beginPath()188      this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)189      this.ctx.fill()190      this.ctx.closePath()191    }192    193    explode() {194      if (this.exploded) return195      this.exploded = true196      this.game.catch()197      this.speed = -5198      this.size /= 10199      if (this.bomb) {200        console.log('gameover')201        this.game.over()202      }203    }204    205    onRaf() {206      if (!this.ready || this.game.gameOver) return207      this.acc += this.vel208      this.speed += this.acc209      this.y += this.speed210      211      if (this.y > (height * this.dpr) + this.size) {212        if (!this.exploded && !this.bomb) {213          this.game.loose()214        }215        if (this.game.gameOver) return216        this.regenerate()217      }218      this.draw()219    }...

lightWaveAnimation.js

Source:lightWaveAnimation.js

...60    }61    onResize() {62        this._setCamera();63    }64    onRaf() {65        this._render();66    }67}68class Mesh {69    constructor(stage) {70        this.canvas = document.getElementById("webgl-canvas");71        this.canvasWidth = 100; // this.canvas.width;72        this.canvasHeight = 130; //this.canvas.height;73        this.uniforms = {74            resolution: { type: "v2", value: [ this.canvasWidth, this.canvasHeight ] },75            time: { type: "f", value: 0.0 },76            xScale: { type: "f", value: 2.0 },77            yScale: { type: "f", value: 0.5 },78            distortion: { type: "f", value: 0.050 }79        };80        this.stage = stage;81        this.mesh = null;82        this.xScale = 2.0;83        this.yScale = 0.5;84        this.distortion = 0.050;85    }86    init() {87        this._setMesh();88        // this._setGui();89    }90    _setMesh() {91        const position = [92            -1.0, -1.0, 0.0,93            1.0, -1.0, 0.0,94            -1.0,  1.0, 0.0,95            1.0, -1.0, 0.0,96            -1.0,  1.0, 0.0,97            1.0,  1.0, 0.098        ];99        const positions = new THREE.BufferAttribute(new Float32Array(position), 3);100        const geometry = new THREE.BufferGeometry();101        geometry.setAttribute("position", positions);102        const material = new THREE.RawShaderMaterial({103            vertexShader: document.getElementById("js-vertex-shader").textContent,104            fragmentShader: document.getElementById("js-fragment-shader").textContent,105            uniforms: this.uniforms,106            side: THREE.DoubleSide107        });108        this.mesh = new THREE.Mesh(geometry, material);109        this.stage.scene.add(this.mesh);110    }111    _diffuse() {112        // gsap.to(this.mesh.material.uniforms.xScale, {113        //   value: 2,114        //   duration: 0.1,115        //   ease: 'power2.inOut',116        //   repeat: -1,117        //   yoyo: true118        // });119        // gsap.to(this.mesh.material.uniforms.yScale, {120        //   value: 1,121        //   duration: 0.1,122        //   ease: 'power2.inOut',123        //   repeat: -1,124        //   yoyo: true125        // });126    }127    _render() {128        this.uniforms.time.value += 0.01;129    }130    _setGui() {131        const parameter = {132            xScale: this.xScale,133            yScale: this.yScale,134            distortion: this.distortion135        }136        const gui = new dat.GUI();137        gui.add(parameter, "xScale", 0.00, 5.00, 0.01).onChange((value) => {138            this.mesh.material.uniforms.xScale.value = value;139        });140        gui.add(parameter, "yScale", 0.00, 1.00, 0.01).onChange((value) => {141            this.mesh.material.uniforms.yScale.value = value;142        });143        gui.add(parameter, "distortion", 0.001, 0.100, 0.001).onChange((value) => {144            this.mesh.material.uniforms.distortion.value = value;145        });146    }147    onRaf() {148        this._render();149    }150}151(() => {152    const stage = new Stage();153    stage.init();154    const mesh = new Mesh(stage);155    mesh.init();156    window.addEventListener("resize", () => {157        stage.onResize();158    });159    window.addEventListener("load", () => {160        setTimeout(() => {161            mesh._diffuse();162        }, 1000);163    });164    const _raf = () => {165        window.requestAnimationFrame(() => {166            stage.onRaf();167            mesh.onRaf();168            _raf();169        });170    };171    _raf();...

funky.js

Source:funky.js

...27        const o = {}28        o.time = window.performance.now() / 100029        o.playhead = o.time % LOOP / LOOP30        this.raf()31        this.onRaf(o)32      })33    }34  }35}36/*--------------------37Canvas38--------------------*/39class Canvas extends Raf {40  constructor(obj) {41    super()42    this.canvas = document.getElementById(obj.id)43    this.ctx = this.canvas.getContext('2d')44    this.resize()45    this.events()46  }47  48  resize() {49    this.dpr = window.devicePixelRatio50    this.canvas.style.width = `${window.innerWidth}px`51    this.canvas.style.height = `${window.innerHeight}px`52    this.canvas.width = window.innerWidth * this.dpr53    this.canvas.height = window.innerHeight * this.dpr54  }55  56  events() {57    window.addEventListener('resize', this.resize)58  }59  60  clear() {61    this.ctx.clearRect(0, 0, window.innerWidth * this.dpr, window.innerHeight * this.dpr)62  }63  64  onRaf() {65    this.clear()66  }67}68/*--------------------69Circle70--------------------*/71class Circle extends Raf {72  constructor(obj) {73    super()74    Object.assign(this, obj)75    this.draw()76  }77  78  draw(playhead, time) {79    const breathe = sin(playhead * TAO)80    this.ctx.globalCompositeOperation = "screen"81    this.ctx.save()82    this.ctx.translate(window.innerWidth / 2 * this.dpr, window.innerHeight / 2 * this.dpr - 30 * this.dpr)83    this.ctx.rotate(PI)84    85    this.ctx.strokeStyle = this.color86    this.ctx.fillStyle = 'rgba(0, 100, 0, 0)'87    this.ctx.lineWidth = this.lineWidth88    this.ctx.beginPath()89    90    for (let i = 0; i <= this.points; i++) {91      const p = i / this.points92      93      const times = 794      const phase = mapRange(cos(p * TAO), -1, 1, 1, mapRange(sin(((this.offset + time * this.speed) * .2 + p) * times * TAO), -1, 1, .5, .58))95      96      let x = phase * this.radius * sin(p * TAO)97      let y = phase * this.radius * cos(p * TAO) 98      99      const type = i === 0 ? 'moveTo' : 'lineTo'100      this.ctx[type](x, y)  101    }102    103    this.ctx.fill()104    this.ctx.stroke() 105    this.ctx.beginPath()106    this.ctx.fillStyle = this.color107    this.ctx.fill()108    this.ctx.restore()109  }110  111  onRaf({playhead, time}) {112    this.draw(playhead, time)113  }114  115}116/*--------------------117Init118--------------------*/119const canvas = new Canvas({120  id: 'canvas'121})122for (let i = 0; i < 8; i++) {123  new Circle({124    ctx: canvas.ctx,125    dpr: canvas.dpr,...

main.js

Source:main.js

...23    this.gui = new dat.GUI();24  }25  init() {26    this._setting()27    this.onRaf()28    gsap.to(this.material.uniforms.uAnimation, {29      value: 1,30      duration: 10,31    })32  }33  _setting() {34    this.webgl.appendChild(this.renderer.domElement)35    this.camera = new THREE.PerspectiveCamera(36      45,37      this.width / this.height,38      0.1,39      100040    )41    this.camera.position.set(0, 0, 2)42    this.controls = new OrbitControls(this.camera, this.renderer.domElement);43    this.controls.enableDamping = true44    45    this._setMesh()46    this._gui();47  }48  _setMesh() {49    this.geometry = new THREE.PlaneBufferGeometry(1,1,1,1);50    this.material = new THREE.ShaderMaterial({51      vertexShader:vert,52      fragmentShader:frag,53      side:THREE.DoubleSide,54      transparent:true,55      uniforms: {56        uTexture: {57          value: this.img58        },59        uProgress: {60          value: 061        },62        uTime: {63          value: 064        },65        uAnimation: {66          value: 067        }68      }69    })70    this.mesh = new THREE.Mesh(this.geometry,this.material);71    this.scene.add(this.mesh);72  }73  _gui() {74    this.gui.add(this.material.uniforms.uProgress,'value',0,1,0.01).name('progress');75  }76  onResize() {77    this.camera.aspect = window.innerWidth / window.innerHeight;78    this.camera.updateProjectionMatrix();79    this.renderer.setSize( window.innerWidth,window.innerHeight);80    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));81  }82  onRaf() {83    this.material.uniforms.uTime.value = this.clock.getElapsedTime()84    this.renderer.render(this.scene, this.camera);85    this.controls.update()86    window.requestAnimationFrame(() => {87      this.onRaf();88    })89  }90}91window.addEventListener('load', () => {92    const gl = new main(document.querySelector('#canvas'));93    window.addEventListener('resize',() => {94      gl.onResize();95    })...

fur.js

Source:fur.js

...17                const o = { };18                o.time = window.performance.now() / 1000;19                o.playhead = o.time % loop / loop;20                this.raf();21                this.onRaf(o);22            });23        }24    }25}26//27class Canvas extends Raf {28    constructor(obj) {29        super();30        this.canvas = document.getElementById(obj.id);31        this.ctx = this.canvas.getContext('2d');32        this.resize();33        this.events();34    }35    resize() {36        this.dpr = window.devicePixelRatio;37        this.canvas.style.width = `${width}px`;38        this.canvas.style.height = `${height}px`;39        this.canvas.width = width * this.dpr;40        this.canvas.height = height * this.dpr;41        this.ctx = this.canvas.getContext('2d');42        this.ctx.scale(this.dpr, this.dpr);43    }44    events() {45        window.addEventListener('resize', this.resize);46    }47    clear() {48        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);49    }50    onRaf() {51        this.clear();52    }53}54//55class Fur extends Raf {56    constructor(obj) {57        super();58        Object.assign(this, obj);59        this.draw();60    }61    draw(playhead, time) {62        this.ctx.save();63        this.ctx.translate(this.x, this.y);64        const n = this.simplex.noise3D(time * 0.1 + this.x * 0.002, -time * 0.2 + this.y * 0.002, time * 0.3);65        this.ctx.fillStyle = 'white';66        const t = Math.round(22 * ((n + 2) * .5)) % 10;67        for (let i = 0; i < t; i++) {68            this.ctx.fillRect(Math.random() * cell, Math.random() * 30, 1, 1);69        }70        this.ctx.fill();71        this.ctx.restore();72    }73    onRaf({ playhead, time }) {74        this.draw(playhead, time);75    }76}77// init78const canvas = new Canvas({79    id: '__canvas'80});81for (let y = 0; y < height; y += cell) {82    for (let x = 0; x < width; x += cell) {83        const i = y * width / cell + x / cell;84        new Fur({85            ctx: canvas.ctx,86            x: x,87            y: y,...

LottieAnimatedTimer.jsx

Source:LottieAnimatedTimer.jsx

1import Lottie from 'lottie-web';2import EkoUIComponents from 'EkoUIComponents';3// Configure Lottie. You need to do this only once. Read more here:4// https://developer.helloeko.com/docs/howto/svgs_and_lottie.html#Using-Lottie-Elements5Lottie.setLocationHref(window.location.href);6export default class LottieAnimatedTimer extends EkoUIComponents.EkoButton{7    componentDidMount(){8        // generate a new Lottie instance with the animation path passed in the props9        this.animation = Lottie.loadAnimation({10            container: this.containerRef.current,11            renderer: 'svg',12            loop: false,13            autoplay: false,14            animationData: this.props.lottieData,15        });16        this.isActive = true;17        this.onRAF = this.onRAF.bind(this);18        this.onRAF();19    }20    componentWillUnmount(){21        this.isActive = false;22        // release resources23        this.animation.destroy();24    }25    onRAF(){26        if (this.isActive) {27            let decisionProgress = player.decision.get(player.currentNodeId).progress;28            let frameNum = Math.round(decisionProgress * this.animation.totalFrames);29            this.animation.goToAndStop(frameNum, true);30            window.requestAnimationFrame(this.onRAF);31        }32    }33    getContent(){34        return null;35    }...

animation.js

Source:animation.js

1'use strict';2var EventEmitter = require('event-emitter');3module.exports = Animation;4function Animation () {5  this.frame = 0;6  EventEmitter.call(this);7}8EventEmitter(Animation.prototype);9Animation.prototype.start = function () {10  if (!this.raf) {11    var onRaf = function (t) {12      this.emit('frame', t, this.frame++)13      this.raf = requestAnimationFrame(onRaf);14    }.bind(this);15    this.raf = requestAnimationFrame(onRaf);16  }17  return this;18};19Animation.prototype.stop = function () {20  if (this.raf) {21    cancelAnimationFrame(this.raf);22    this.raf = null;23  }24  return this;...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.screenshot({path: 'example.png'});6  await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10  const browser = await puppeteer.launch();11  const page = await browser.newPage();12  await page.screenshot({path: 'example.png'});13  await browser.close();14})();15const puppeteer = require('puppeteer');16(async () => {17  const browser = await puppeteer.launch();18  const page = await browser.newPage();19  await page.screenshot({path: 'example.png'});20  await browser.close();21})();22const puppeteer = require('puppeteer');23(async () => {24  const browser = await puppeteer.launch();25  const page = await browser.newPage();26  await page.screenshot({path: 'example.png'});27  await browser.close();28})();29const puppeteer = require('puppeteer');30(async () => {31  const browser = await puppeteer.launch();32  const page = await browser.newPage();33  await page.screenshot({path: 'example.png'});34  await browser.close();35})();36const puppeteer = require('puppeteer');37(async () => {38  const browser = await puppeteer.launch();39  const page = await browser.newPage();40  await page.screenshot({path: 'example.png'});41  await browser.close();42})();43const puppeteer = require('puppeteer');44(async () => {45  const browser = await puppeteer.launch();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const path = require('path');3(async () => {4  const browser = await puppeteer.launch();5  const page = await browser.newPage();6  await page.goto(`file:${path.join(__dirname, 'index.html')}`);7  await page.on('console', msg => console.log('PAGE LOG:', msg.text()));8  await page.evaluate(() => {9    window.requestAnimationFrame(() => {10      console.log('I was called');11    });12  });13  await browser.close();14})();15      window.requestAnimationFrame(() => {16        console.log('I was called');17      });18const puppeteer = require('puppeteer');19const path = require('path');20(async () => {21  const browser = await puppeteer.launch();22  const page = await browser.newPage();23  await page.goto(`file:${path.join(__dirname, 'index.html')}`);24  await page.on('console', msg => console.log('PAGE LOG:', msg.text()));25  await page.evaluate(() => {26    window.requestAnimationFrame(() => {27      console.log('I was called');28    });29  });30  await browser.close();31})();32      window.requestAnimationFrame(() => {33        console.log('I was called');34      });35const puppeteer = require('puppeteer');36const path = require('path');37(async () => {38  const browser = await puppeteer.launch();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4const { promisify } = require('util');5const writeFile = promisify(fs.writeFile);6const readFile = promisify(fs.readFile);7(async () => {8  const browser = await puppeteer.launch();9  const page = await browser.newPage();10  const dimensions = await page.evaluate(() => {11    return {12    };13  });14  console.log('Dimensions:', dimensions);15  await page.screenshot({path: 'example.png'});16  await browser.close();17})();18const puppeteer = require('puppeteer');19const fs = require('fs');20const path = require('path');21const { promisify } = require('util');22const writeFile = promisify(fs.writeFile);23const readFile = promisify(fs.readFile);24(async () => {25  const browser = await puppeteer.launch();26  const page = await browser.newPage();27  const dimensions = await page.evaluate(() => {28    return {29    };30  });31  console.log('Dimensions:', dimensions);32  await page.screenshot({path: 'example.png'});33  await browser.close();34})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4const outputDir = path.join(__dirname, 'output');5(async () => {6  const browser = await puppeteer.launch();7  const page = await browser.newPage();8  await page.setViewport({ width: 1920, height: 1080 });9  await page.goto(url);10  await page.evaluate(async () => {11    await new Promise((resolve) => {12      requestAnimationFrame(resolve);13    });14  });15  await page.screenshot({ path: `${outputDir}/screenshot.png` });16  await browser.close();17})();18const puppeteer = require('puppeteer');19const fs = require('fs');20const path = require('path');21const outputDir = path.join(__dirname, 'output');22(async () => {23  const browser = await puppeteer.launch();24  const page = await browser.newPage();25  await page.setViewport({ width: 1920, height: 1080 });26  await page.goto(url);27  await page.evaluate(async () => {28    await new Promise((resolve) => {29      requestAnimationFrame(resolve);30    });31  });32  await page.screenshot({ path: `${outputDir}/screenshot.png` });33  await browser.close();34})();35const puppeteer = require('puppeteer');36const fs = require('fs');37const path = require('path');38const outputDir = path.join(__dirname, 'output');39(async () => {40  const browser = await puppeteer.launch();41  const page = await browser.newPage();42  await page.setViewport({ width: 1920, height: 1080 });43  await page.goto(url);44  await page.evaluate(async () => {45    await new Promise((resolve) => {46      requestAnimationFrame(resolve);47    });48  });49  await page.screenshot({ path: `${outputDir}/screenshot.png` });50  await browser.close();51})();52const puppeteer = require('puppeteer');53const fs = require('fs');54const path = require('path');

Using AI Code Generation

1const puppeteer = require('puppeteer');2const path = require('path');3const fs = require('fs');4(async () => {5  const browser = await puppeteer.launch({headless: false});6  const page = await browser.newPage();7  await page.setViewport({ width: 1920, height: 1080});8  await page.screenshot({path: 'full.png', fullPage: true});9  await page.evaluate(async () => {10    await new Promise((resolve, reject) => {11      var totalHeight = 0;12      var distance = 100;13      var timer = setInterval(() => {14        var scrollHeight = document.body.scrollHeight;15        window.scrollBy(0, distance);16        totalHeight += distance;17        if(totalHeight >= scrollHeight){18          clearInterval(timer);19          resolve();20        }21      }, 100);22    });23  });24  await page.screenshot({path: 'scroll.png', fullPage: true});25  await browser.close();26})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.setViewport({6  });7  await page.on('response', response => {8    if (response.ok()) {9      const request = response.request();10      const timeInterval = response._request._timing.responseEnd - request._timing.requestTime;11      const timeTaken = response._request._timing.responseEnd - response._request._timing.requestTime;12      console.log('Time Interval: ' + timeInterval + 'ms');13      console.log('Time Taken: ' + timeTaken + 'ms');14    }15  });16  await browser.close();17})();18run();

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.