🪲 fix: home animation on mobile

henriquepw · Mar 23, 2020 · f3dd1e0 · f3dd1e0
1 parent 8eee26a
commit f3dd1e0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -24,6 +24,9 @@ const Home: FC = () => {
   useEffect(() => {
     const tl = gsap.timeline();
 
+    // prevents flashing
+    gsap.to('#home', 0, { css: { visibility: 'visible' } });
+
     tl.from('#title span', 2, {
       y: '100%',
       ease: 'power3.out',

diff --git a/src/components/Home/styles.ts b/src/components/Home/styles.ts
@@ -8,6 +8,8 @@ export const Container = styled(section)`
   align-items: center;
   justify-content: space-between;
 
+  visibility: hidden;
+
   div:first-of-type {
     p,
     h1 {
@@ -34,6 +36,7 @@ export const Container = styled(section)`
 
   div:nth-of-type(2) {
     position: relative;
+    overflow: hidden;
     height: 100vh;
     width: 40%;