remove object when they go up

Author: carlosjorger

css/presentation-section.css

@@ -14,7 +14,6 @@
 
 .presentation-main-skill {
   font-size: 1.8rem;
-  opacity: 0;
   animation-name: show-presentation-main-skill;
   animation-timing-function: ease;
   animation-duration: 1s;
@@ -24,8 +23,7 @@
   margin-bottom: 0.7rem;
 }
 
-#presentation-description {
-  opacity: 0;
+.presentation-description {
   animation-name: show-presentation-main-skill;
   animation-timing-function: ease;
   animation-duration: 1s;

css/styles.css

@@ -72,13 +72,14 @@ hr {
 /* || UTILITIES */
 
 .reveal {
-  opacity: 0;
+  opacity: 0 !important;
   transition: all 1s ease-in;
   transform: translate(0vh, 3vh);
 }
 
 .reveal.active {
-  opacity: 1;
+  opacity: 1 !important;
+  transition: all 1s ease-in;
   transform: translate(0vh, 0vh);
 }
 

index.html

@@ -141,7 +141,7 @@ <h1 class="presentation-title">
           <h2 class="presentation-main-skill">
             Welcome to my personal portfolio!
           </h2>
-          <p id="presentation-description">
+          <p class="presentation-description">
             I'm a cuban computer science from Havana University. Currently, I'm
             working as full-stack engineer focused in building .net application
             and their performance. Also, I work in frontend websites using

index.js

@@ -3,10 +3,13 @@ function reveal() {
   [...revealElements].forEach((element) => {
     var windowHeight = window.innerHeight;
     const elementTop = element.getBoundingClientRect().top;
+    const elementBottom = element.getBoundingClientRect().bottom;
     if (
       elementTop <
-      windowHeight - element.getBoundingClientRect().height + 150
+        windowHeight - element.getBoundingClientRect().height + 150 &&
+      elementBottom >= 150
     ) {
+      console.log(element);
       element.classList.add("active");
     } else {
       element.classList.remove("active");