<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="trigger"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/three@0.122/build/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> <script> let camera, scene, renderer; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(40, window.innerWidth / ( window.innerHeight * 2 ), 0.1, 10); camera.position.set(0, 0, 7); const geometry = new THREE.BoxBufferGeometry(); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight * 2); document.body.appendChild(renderer.domElement); // gsap gsap.registerPlugin(ScrollTrigger); gsap.to(mesh.rotation, { scrollTrigger: { trigger: "#trigger", start: "top top", end: "bottom top", scrub: true, toggleActions: "restart pause resume pause" }, y: Math.PI }); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } </script>

body { margin: 0px; } canvas { display: block; } #trigger { position: absolute; height: 100%; }