Smoothen the intro transition on homepage

Author: CompuIves

packages/homepage/src/screens/home/hero/BoxAnimation/index.js

@@ -128,7 +128,7 @@ function Box({ position, rotation, onDrag, onDragStop }) {
 }
 
 export default function App({ boxes, showPlane }) {
-  const [prop, set] = useSpring(() => ({ intensity: 0.6, color: '#fff' }));
+  const [prop, set] = useSpring(() => ({ intensity: 0, color: '#fff' }));
   const [animationDisabled, setAnimationDisabled] = React.useState(false);
   const [dragging, setDragging] = React.useState(false);
 
@@ -141,16 +141,8 @@ export default function App({ boxes, showPlane }) {
   }, []);
 
   useEffect(() => {
-    if (!boxes.length) {
-      return;
-    }
-
-    set({ intensity: 1 });
-
-    setTimeout(() => {
-      set({ intensity: 0.6 });
-    }, 300);
-  }, [boxes, set]);
+    set({ intensity: 0.6 });
+  }, [set]);
 
   if (animationDisabled) {
     return (
@@ -177,7 +169,7 @@ export default function App({ boxes, showPlane }) {
         }}
         resize={{ polyfill: ResizeObserver }}
       >
-        <ambientLight intensity={0.5} />
+        <a.ambientLight {...prop} />
 
         <a.spotLight
           {...prop}

packages/homepage/src/screens/home/hero/index.js

@@ -19,7 +19,6 @@ import {
 import hero from '../../../assets/images/hero-ide-home.png';
 
 import BoxAnimation from './BoxAnimation';
-import { applyParallax } from '../../../utils/parallax';
 
 export default () => {
   const [boxes, setBoxes] = useState([]);
@@ -106,13 +105,6 @@ export default () => {
 
   const ideRef = useRef();
 
-  useEffect(() => {
-    applyParallax(ideRef.current, {
-      speed: 2,
-      center: true,
-    });
-  }, []);
-
   return (
     <HeroWrapper>
       <BoxAnimation boxes={boxes} showPlane={showPlane} />
@@ -151,32 +143,41 @@ export default () => {
         </motion.div>
       </motion.div>
 
-      <HeroBottom>
-        <div ref={ideRef}>
-          <CountText>
-            <span style={{ fontWeight: 600, color: 'white' }}>
-              {sandboxesCreatedCount}{' '}
-            </span>
-            {sandboxesCreatedCount === 1 ? 'sandbox' : 'sandboxes'} created
-            since you opened this page
-          </CountText>
-
-          <div style={{ position: 'relative' }}>
-            <StyledEditorLink
-              href="/s/m7q0r29nn9"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              <InspiredText>
-                Inspired by the sandboxes created by drcmda
-              </InspiredText>
-              Open Sandbox
-            </StyledEditorLink>
-
-            <HeroImage alt="editor with project open" src={hero} />
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: 0.5,
+          delay: 0.3,
+        }}
+      >
+        <HeroBottom>
+          <div ref={ideRef}>
+            <CountText>
+              <span style={{ fontWeight: 600, color: 'white' }}>
+                {sandboxesCreatedCount}{' '}
+              </span>
+              {sandboxesCreatedCount === 1 ? 'sandbox' : 'sandboxes'} created
+              since you opened this page
+            </CountText>
+
+            <div style={{ position: 'relative' }}>
+              <StyledEditorLink
+                href="/s/m7q0r29nn9"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                <InspiredText>
+                  Inspired by the sandboxes created by drcmda
+                </InspiredText>
+                Open Sandbox
+              </StyledEditorLink>
+
+              <HeroImage alt="editor with project open" src={hero} />
+            </div>
           </div>
-        </div>
-      </HeroBottom>
+        </HeroBottom>
+      </motion.div>
 
       <Border />
     </HeroWrapper>