Search the Community

Hi GSAP Community, I'm currently facing some performance issues with a project that I've been working on. According to Google PageSpeed Insights, I'm seeing significant main thread blocking time and high JavaScript execution time. Specifically, the report indicates: Minimize the impact of third-party code: Third-party code blocked the main thread for 44,300 ms Reduce JavaScript execution time: 25.1 s I'm not sure if this is due to the way I have written my code or if there might be other underlying issues. Here is the JSFiddle for my project: JSFiddle The Website / Test-Side which isnt published yet Test-Animation-Web For context, my project involves animating multiple bars using Three.js and GSAP. Below is a brief overview of my setup: I initialize the scene, camera, and renderer using Three.js. I load textures and create bar objects. I animate the bars using GSAP for both initial animation and continuous looping animation. I am very new and inexperienced with GSAP, but I'm really proud of what I've achieved so far. Here is a snippet of my code: let scene, camera, renderer, bars = []; let barCount = 500; // Number of bars let barWidth = 2 / barCount; // Width of the bars let texture, noiseTexture; function init() { const container = document.getElementById('container'); // Initialize scene and camera scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 1; camera.position.x = -2.5; // Initialize renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; container.appendChild(renderer.domElement); // Add lights const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 5, 5); light.castShadow = true; scene.add(light); const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); // Load textures const loader = new THREE.TextureLoader(); loader.load( 'https://cors-anywhere.herokuapp.com/https://logton.de/lo-gt-on-sb92/wp-content/uploads/2024/07/DIE-LOGISTIKEXPERTEN-Logton.png', (tex) => { texture = tex; loader.load( 'https://threejs.org/examples/textures/disturb.jpg', (noiseTex) => { noiseTexture = noiseTex; createBars(texture, noiseTexture); initialAnimation(); } ); }, undefined, (err) => { console.error('Error loading texture:', err); } ); window.addEventListener('resize', onWindowResize); onWindowResize(); animate(); } function createBars(texture, noiseTexture) { const aspectRatio = texture.image.width / texture.image.height; const barHeight = 1.7; for (let i = 0; i < barCount; i++) { let geometry = new THREE.PlaneGeometry(barWidth, barHeight); let material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, opacity: 0.9, onBeforeCompile: (shader) => { shader.uniforms.noiseTexture = { value: noiseTexture }; shader.fragmentShader = ` uniform sampler2D noiseTexture; ${shader.fragmentShader} `.replace( `#include <dithering_fragment>`, ` vec4 noise = texture2D(noiseTexture, vUv); gl_FragColor.rgb += noise.rgb * 0.1; #include <dithering_fragment> ` ); } }); let uvs = geometry.attributes.uv.array; for (let j = 0; j < uvs.length; j += 2) { uvs[j] = uvs[j] * (1 / barCount) + (i / barCount); } geometry.attributes.uv.needsUpdate = true; let bar = new THREE.Mesh(geometry, material); bar.position.x = (i - barCount / 2) * barWidth * aspectRatio; bar.position.y = Math.random() * 2 - 1; bar.scale.y = 10; bar.castShadow = true; bar.receiveShadow = true; bars.push(bar); scene.add(bar); } } function initialAnimation() { gsap.to(bars.map(bar => bar.position), { y: 0, duration: 2.5, ease: 'power4.inOut', stagger: 0.005 }); gsap.to(bars.map(bar => bar.scale), { y: 1, duration: 2.5, ease: 'power4.inOut', stagger: 0.005, onComplete: mainAnimation }); } function mainAnimation() { const animationPhases = [ { scaleY: 5, duration: 0.3, yOffset: 0.5 }, { scaleY: 0.2, duration: 0.125, yOffset: 0.2 }, { scaleY: 3, duration: 0.4, yOffset: 0.4 }, { scaleY: 2, duration: 0.5, yOffset: 0.3 }, { scaleY: 1.5, duration: 0.6, yOffset: 0.2 } ]; let currentPhase = 0; function animatePhase() { const { scaleY, duration, yOffset } = animationPhases[currentPhase]; bars.forEach((bar, i) => { const delay = Math.random() * 0.2; gsap.to(bar.position, { y: (Math.random() - 0.5) * yOffset, duration: duration, ease: 'power2.inOut', yoyo: true, repeat: 1, delay: delay, onComplete: () => { bar.position.y = 0; } }); gsap.to(bar.scale, { y: Math.random() * scaleY + 1, duration: duration, ease: 'power2.inOut', yoyo: true, repeat: 1, delay: delay }); }); currentPhase = (currentPhase + 1) % animationPhases.length; } animatePhase(); setInterval(animatePhase, 2000); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } function scrollContainer() { gsap.to(camera.position, { x: 2.5, duration: 16, ease: "linear", repeat: -1, onRepeat: () => { camera.position.x = -2.5; } }); } init(); scrollContainer(); I would appreciate any insights or suggestions on how to improve the performance and reduce the blocking time and execution time. Thank you!

How do I change this code into gsap, and apply it to the loading screen and don't need to press a button for the effect to work automatically. So the transition effect will run automatically without having to press a button after the web page has been completely loaded. https://codepen.io/Unleashed-Design/pen/JZwexa

Hi, I've just created a preloader with a handful of options(ease and other config options) to play. Just wanted to share this here. Play with it!! Thank you Cheers, Sven.