globae update

src/molecules/InteractiveGlobe.svelte

@@ -18,9 +18,8 @@
         };
     }
 
-
     // Props
-    // export let type = ''
+    export let type = ''
     let scope
     let globe
     let containerTop = 0
@@ -36,6 +35,7 @@
         globe.resize()
         globe.update()
     }
+
     const update = () => {
         requestAnimationFrame(update)
         globe.update()
@@ -43,10 +43,10 @@
 
     const onScroll = (e)=> {
         let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) /2 ) - document.documentElement.scrollTop
-        let scrollRatio = 1 - ( scrollDiff / window.innerHeight ) 
-
-        globe && globe.updateCameraPos( scrollRatio )
+        let scrollRatio = (1 - ( scrollDiff / window.innerHeight ) ) * 2
+        globe && globe.updateCameraPos( scrollRatio, scrollDiff - window.innerHeight)
     }
+
     /*
     ** Run code when mounted
     */
@@ -72,8 +72,8 @@
             // Init the globe from library
             globe = new InteractiveGlobe({
                 el: scope,
-                cameraDistance: 1.5,
-                autoRotationSpeed: -0.01,
+                cameraDistance: 0.5,//smaller number == larger globe
+                autoRotationSpeed: -0.0025,
                 scrollSmoothing: 0.5, 
                 texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
                 markers: [...$locations.map(location => {
@@ -99,12 +99,8 @@
 
 <svelte:window on:resize={resize} on:scroll={onScroll} />
 
-<!-- {#if type === 'part'}
-<div class="globe__cut">
-    <div class="globe" bind:this={scope} />
-</div>
+{#if type === 'part'}
+<div class="globe globe--cut" bind:this={scope} />
 {:else}
 <div class="globe" bind:this={scope} />
-{/if} -->
-
-<div class="globe" bind:this={scope} />
+{/if}