Search code examples
javascripthtmlcssgsap

Tweenmax opacity remains 1 for a brief moment when page reloads

I have implemented TweenMax from Gsap and made a landing page intro wherein the loading container, there are three divs containing three h5 elements positioned in the center using absolute. First I did StaggerFrom{ opacity 0 } to staggerTo{ opacity 1 }. But for some reason as soon as I reload the page, I can see all the three h5 elements stacked on top of each other for a few milliseconds.

https://codepen.io/pranaymajee/pen/PomMaVM

On codepen it seems to work fine but on my browser its not.

TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  </body>
</html>

depen it seems to work fine but its happening on my browser Any solutions ?

Solution

  • There is a timing problem, which is probably amerliorated in codepen because in that the code is run within an iframe.

    The loadtexts need to start off at opacity 0 so they don't show as soon as they are loaded and then set to opacity 1 just before the tween max code is called.

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  }
  .opacity1 {
  opacity: 1; /* ADDED */
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}
    </style>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  <script>
  const loadtexts = document.querySelectorAll('.loadtext');
  loadtexts.forEach(loadtext => {
    loadtext.classList.add('opacity1');
  });
  TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

</script>
</body>
</html>

    Note: runnning as an SO snippet also will have different timing considerations so this code needs to be run direct in a browser to give a proper test:

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.loadcon{
  background-color: #000000;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadtext{
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  }
  .opacity1 {
  opacity: 1; /* ADDED */
}

.loadtext h5{
  font-family: "Cyrene";
  color: #fff;
  font-size: 200px;
  position: absolute;
  top: 50%
  left: 50%;
  transform: translate(-50%,-50%);
}
    </style>
  </head>
  <body>
    <div class="loadcon">
        <div class="loadtext">
            <h5>Learn</h5>
        </div>
        <div class="loadtext">
            <h5>Code</h5>
        </div>
        <div class="loadtext">
            <h5>Repeat</h5>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  <script>
  const loadtexts = document.querySelectorAll('.loadtext');
  loadtexts.forEach(loadtext => {
    loadtext.classList.add('opacity1');
  });
  TweenMax.to(
  ".loadcon",
  2, {
    y: "-100%",
    ease: Expo.easeInOut,
    delay: 6,
  },
);


TweenMax.staggerFrom(
  ".loadtext",
  1, {
    x: "-80",
    ease: Power3.easeInOut,
    opacity: "0",
  },
  2
);
TweenMax.staggerTo(
  ".loadtext",
  0.8, {
    x: "80",
    ease: Power3.easeInOut,
    delay: 1.2,
    opacity: "0",
  },
  2
);

</script>
</body>
</html>