gisdirk

@Cassie thanks, works perfectly. I finished the animation but ended up having too many lines of code and probably not organized in the most effective way. Any chance I can combine codes or use a nested timeline structure. I failed doing the latter so any help is appreciated. Here is the code var tl = gsap.timeline(); // 3D animation ThreeJS tl.from(mesh1.rotation, { duration: 6, ease: "none", x: Math.PI * 0.5, y: -Math.PI * 5 }) .from(mesh1.position, { duration: 6, x: -20, y: -10 }, "<") .from( mesh2.rotation, { duration: 6, ease: "none", x: Math.PI * 0.5, y: Math.PI * 5 }, "<") .from(mesh2.position, { duration: 6, x: 20, y: -10 }, "<") .from( mesh3.rotation, { duration: 6, ease: "none", z: Math.PI * 0.5, x: -Math.PI * 5 }, "<") .from(mesh3.position, { duration: 6, x: 0, y: 10 }, "<") // HMTL elements animation .to(".mainLogo", { duration: 1, opacity: 1 }, "+=1") .to(".sword", {duration:1, opacity: 1}, "<") .from(".sword", { duration: 0.3, y: -600, ease: "none" }) .to(".flashWhite", {duration: 0.05, opacity: 1}) .to(".flashWhite", {duration: 0.05, opacity: 0}) .to(".flashRed", {duration: 0.05, opacity: 1}) .to(".flashRed", {duration: 0.05, opacity: 0}) .to(".flashWhite", {duration: 0.05, opacity: 1}) .to(".flashWhite", {duration: 0.05, opacity: 0}) .to(".flashRed", {duration: 0.05, opacity: 1}) .to(".flashRed", {duration: 0.05, opacity: 0}) .to(".flashWhite", {duration: 0.05, opacity: 1}) .to(".flashWhite", {duration: 0.05, opacity: 0}) .to(".flashRed", {duration: 0.05, opacity: 1}) .to(".flashRed", {duration: 0.05, opacity: 0}) .to(".background", {duration: 0.3, opacity: 1}, "<"); Also I failed to make a button element glow/flash using GSAP so I had to fall back on CSS keyframes which I try to avoid. #play { position:absolute; top: 50vh; left:44vw; background-color: rgb(32, 32, 32); color: #FFD700; font-family: 'VT323', monospace; font-size: 35px; z-index:10; } #play { animation: glowing 1300ms infinite; } @keyframes glowing { 0% { box-shadow: 0 0 5px #FFD700; } 50% { box-shadow: 0 0 20px #FFD700; } 100% { box-shadow: 0 0 5px #FFD700; } } Codepen Thanks in advance

It works! Many thanks @OSUblake I have expanded the code a bit and now I have three meshes that rotate and move in the scene. scene.add(mesh1, mesh2, mesh3); gsap.from(mesh1.rotation, { duration: 8, ease: "none", x: Math.PI * 0.5 }); gsap.from(mesh1.rotation, { duration: 8, ease: "none", y: -Math.PI * 5 }); gsap.from(mesh1.position, { duration: 8, x: -20, y: -10 }); gsap.from(mesh2.rotation, { duration: 8, ease: "none", x: Math.PI * 0.5 }); gsap.from(mesh2.rotation, { duration: 8, ease: "none", y: Math.PI * 5 }); gsap.from(mesh2.position, { duration: 8, x: 20, y: -10 }); gsap.from(mesh3.rotation, { duration: 8, ease: "none", z: Math.PI * 0.5 }); gsap.from(mesh3.rotation, { duration: 8, ease: "none", x: -Math.PI * 5 }); gsap.from(mesh3.position, { duration: 8, x: 0, y: 10 }); https://codepen.io/gisdirk/pen/BaJLwOm Would it be possible to include those animations into a timeline but still have them to be animated at the same time? Maybe through some sort of grouping or similar...? The idea is to have them to be animated first, followed by other animations as shown here in the original video.

Hi All, I have just started to learn GSAP and can't get passed this problem. I tried to animate a threeJS object with GSAP but can't get it work. I suspect it has something to do with the render function or the positioning of the gsap code? Any help is very much appreciated. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create Triangles var material = new THREE.MeshPhongMaterial({ color: 0xf6c12a, shininess: 70 }); var shape = new THREE.Shape(); shape.moveTo(0, 0); shape.lineTo(2, 3); shape.lineTo(4, 0); shape.lineTo(0, 0); var extrudeSettings = { steps: 5, depth: 1, bevelEnabled: true, bevelThickness: 0.3, bevelSize: 0.5, bevelOffset: 0, bevelSegments: 1 }; var geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings); // Sets the origin to the center of geometry for rotation geometry.center(); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = 0; mesh.position.y = 0; mesh.position.z = -5; mesh.scale.set(1.5, 1.5, 1.5); scene.add(mesh); gsap.to(mesh, { duration: 2, x: 300 }); camera.position.z = 5; // Background var geometry = new THREE.PlaneGeometry(1000, 1000, 1); var material = new THREE.MeshPhysicalMaterial({ color: 0x444444 }); var plane = new THREE.Mesh(geometry, material); plane.position.z = -50; scene.add(plane); // Lighting var ambientLight = new THREE.AmbientLight(0xffffff, 0.55); scene.add(ambientLight); var pointLight1 = new THREE.PointLight(0xf9eac8, 1, 100); pointLight1.position.set(5, 10, 0); pointLight1.castShadow = true; pointLight1.shadow.camera.top = 20; scene.add(pointLight1); function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render();