Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacity 1}. However, upon reloading the page, I noticed that all three h5 elements appear stacked on top of each other for a brief moment.

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

Although it works fine on Codepen, I'm facing issues on my browser.

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>

The issue seems to persist in my browser even though it works on CodePen. Any suggestions?

javascripthtmlcssgsap

Answer №1

One issue to consider is a timing problem, which may be alleviated in codepen due to running the code within an iframe.

To prevent the loadtexts from showing immediately upon loading, they should start with opacity set to 0 and then transition to opacity 1 just before the tween max code is executed.

<!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: when testing this code, it's important to run it directly in a browser instead of as an SO snippet to properly assess the timing differences:

<!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>

Answer №2

Perhaps a more streamlined method would be to simply set opacity:0

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

Next, adjust your staggerTo() and staggerFrom() functions accordingly

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

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

You'll notice redundant CSS properties in both .loadedText{} and .loadedtext h5{}, which can be removed.

https://i.sstatic.net/lWbBA.gif

https://codepen.io/non_tech_guy/pen/qBmeJOj

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Limiting ng-repeat in AngularJS when the last item on the object is reached

I have a large object being repeated using ng-repeat, and it runs smoothly on Chrome and Opera. However, when it comes to browsers like Mozilla and IE, the performance is very slow. I tried implementing pagination, which helped speed things up, but ideally ...

javascripthtmlangularjsangularjs-ng-repeat

Is there a way to modify AJAX response HTML and seamlessly proceed with replacement using jQuery?

I am working on an AJAX function that retrieves new HTML content and updates the form data in response.html. However, there is a specific attribute that needs to be modified before the replacement can occur. Despite my best efforts, I have been struggling ...

javascriptjqueryhtmlajax

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

Creating a FusionCharts time series with a sleek transparent background

Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...

cssreactjssvgfusioncharts

"Error in react-three-fiber: Only the last mesh retains its model, all others are

Currently, I am working on a React application where I am using react-three-fiber to visualize data in a 3D environment. My goal is to create various models by passing data representing their characteristics as props into components. However, I am encounte ...

javascriptreactjsthree.jsreact-three-fiber

HTML elements not displaying in Ajax form

I am encountering an issue with my ajax based feedback form where the form is displaying the html from the response instead of processing it correctly. Here is the JQuery code: $(document).ready(function() { var form_holder = $('#form-holder'); ...

javascriptphpjqueryhtmlajax

Tips for including a close button in a slidedown panel

Having this as a functional slidedown effect: ::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ background: transparent; } /* optional: show position indicator in red */ ::-webkit-scrollbar ...

htmlcss

Develop two varieties of user account models using Mongodb/Mongoose

Currently, I am utilizing mongoose in my nodejs project and I am seeking advice on creating a MongoDB schema that caters to two different user types: employees and clients. Both of these users will be registering through the same page (I am implementing pa ...

javascriptnode.jsmongodbmongoose

5 horizontal navbar with dropdown menu in Bootstrap

I am currently utilizing bootstrap 5. Is it possible to display my navbar menus horizontally like the image provided? show submenus horizontally as shown in this picture I would also like to implement submenu for other submenus up to 4 levels deep. Any ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Is it possible to create a custom options array in React-Select?

I've been working with react-select using the package from . The required format for the options prop is {value:something, label:something}. I have a list of objects with additional key-value pairs and I'm wondering if there's a way to avoi ...

javascriptreactjs

Trouble with AngularJS Smart Table when dealing with live data streams

Currently, I am facing a scenario where I am utilizing angularJs smart table for filtering. Here is the HTML code: <section class="main" ng-init="listAllWorkOrderData()"> <table st-table="listWorkOrderResponse"> <thead> ...

javascriptangularjssmart-table

Showing particular URL text upon opening a new window using JavaScript

I've encountered an intriguing scenario. In my application, there's a feature that triggers a new window/tab to open when a button is clicked. Upon opening, a predefined HTML page is shown to the user with a specific URL set. I'm curious abo ...

javascriptangular

Key press event not firing as expected

<multiselect v-model="value" :options="websites" label="url" track-by="url" :allow-empty="false" class="header-select mr-3" v-on:keyup.enter="submit"></multiselect> My requi ...

javascriptvue.js

JavaScript parsing error occurred

Encountering a parsing error in my JavaScript code when deploying Firebase functions. The error mentions an unexpected token, indicating there might be a character out of place. I've been stuck on this issue for weeks now. Any assistance would be grea ...

javascriptfirebase

Encountering difficulties with image processing on a web page

Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...

javascripthtmlimage-processing

Combining the lower margin of an image with the padding of a container: a step-by-step guide

There are two divs with a 50px padding, making them 100px apart. The top div contains an image floated to the right with paragraphs wrapping around it. The requirements team requests a 20px margin below the image if text flows under it, but no margin if th ...

htmlcssmargin

Child Theme setup in progress! Beware of the error message: "Unable to access file: file_get_contents9(). The specified stream does not exist."

I am currently in the process of developing a child theme based on my existing theme (Tesseract 2). I have carefully followed the guidelines outlined here, but unfortunately, I keep encountering the following error: Warning: file_get_contents(/home/fletch ...

phpcsswordpress

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Lending a hand in deselecting a rule within the jcf-hidden add-on using Selenium

Currently, I am working on automating a website that utilizes the jcf-hidden class (a form of jQuery class) which hides the select element I want to access. By removing the display: block !important; property, I was able to successfully interact with the ...

javascriptjqueryscalaselenium

Improving the quality of shadows in Three.js

I'm looking to create realistic shadows in my scene using a DirectionalLight to simulate sunlight. However, I'm struggling with the shadow quality settings - toggling between on/off, Low, Normal, and High: Setting parameters a and b within these ...

javascriptthree.js