Is there a way to adjust text animations so they appear separately in their designated space?

During my project, I decided to incorporate some CSS animations onto the site. However, I encountered a problem with the overflow: hidden attribute not functioning as anticipated. Here is the code snippet I used:

.jumbotron {
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;
}

.sty {
    display: inline-block;
    position: relative;
}

.sty1 {
    position: relative;
    animation: firanim 1.5s ease-in-out;
    overflow: hidden;
}
.sty2 {
    position: relative;
    animation: secanim 1s ease-in-out;
    overflow: hidden;
}

@keyframes firanim {
    from {top:-50px;}
    to {top:0px;}
}
@keyframes secanim {
    from {left:-55vw;}
    to {left:0px;}
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>lorem ipsum</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Development</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Follow</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

Could you help me identify if there is a missing class in my code or if I am using something incorrectly? I expected the span element with the .lead class to remain within its designated space, rather than appearing to fly in from elsewhere. I hope I have conveyed my issue clearly.

javascripthtmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

Animating the entire box (.sty1 and .sty2) will not hide the text (.lead) since it is not positioned outside of the (.sty1 and .sty2) elements. To ensure the text is animated properly, you should keep the (.sty1 and .sty2) elements in place and animate .lead instead.

Here is a suggested code snippet:

.jumbotron {
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;
}

.sty {
  display: inline-block;
  position: relative;
}

.sty1 {
  overflow: hidden;
}

.sty2 {
  overflow: hidden;
}

.sty1 .lead {
  position: relative;
  animation: firanim 1.5s ease-in-out;
}

.sty2 .lead {
  position: relative;
  animation: secanim 1s ease-in-out;
}

@keyframes firanim {
  from {
    top: -50px;
  }

  to {
    top: 0px;
  }
}

@keyframes secanim {
  from {
    left: -55vw;
  }

  to {
    left: 0px;
  }
}

Answer №2

Your animation is set on the containers with classes .sty1 and .sty2 inside the .lead container. This means that the entire container is moving, including your lead elements. To correct this, you can wrap these elements in a div with a class that has its overflow set to hidden, like this:

I have added an animation-container with overflow set to hidden. Below is the updated HTML:

.jumbotron {
  height: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  position: relative;
}

.sty {
  display: inline-block;
  position: relative;
}

.sty1 {
  position: relative;
  animation: firanim 1.5s ease-in-out;
  overflow: hidden;
}

.sty2 {
  position: relative;
  animation: secanim 1s ease-in-out;
  overflow: hidden;
}

.animation-container {
  overflow: hidden;
}

@keyframes firanim {
  from {
    top: -50px;
  }
  to {
    top: 0px;
  }
}

@keyframes secanim {
  from {
    left: -55vw;
  }
  to {
    left: 0px;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

  <title>Anurag Srivastava - Portfolio</title>
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
    <a class="navbar-brand" href="#">Under Development</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Follow</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="jumbotron justify-content-center">
    <div class="text-monospace sty">
      <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
      <div class="animation-container">
        <div class="sty1">
          <span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
      </div>
      <div class="sty2">
        <span class="lead">lorem ipsum lorem ipsum lorem.</span>
      </div>
    </div>
  </div>

  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <!-- EndJS -->
</body>

</html>

Answer №3

Check out this HTML code snippet:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css">
  <!-- EndCSS -->

    <title>Your Name - Portfolio</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
        <a class="navbar-brand" href="#">Under Construction</a>
        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Connect</a>
            </li>
          </ul>
        </div>
    </nav>


    
    <div class="jumbotron justify-content-center">
      <div class="text-monospace sty">
        <h1 class="display-3">welcome<span class="text-danger">!</span></h1>
        <div class="sty1">
        <span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
        </div>
        <div class="sty2">
        <span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
        </div>
      </div>
    </div>



<!-- JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081708081d0a56120b384956494e5648">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
  </body>
</html>

Also, here's the corresponding CSS:

.jumbotron {
    height: 100%;
    height: 100vh;
    align-items: center;
    display: flex;
    position: relative;
}

.sty {
    display: inline-block;
    position: relative;
}

.sty1 {
    overflow: hidden;
}
.lead_1{
  animation: firanim 1.5s ease-in-out;
  position: relative;
}
.lead_2{
  position: relative;
  animation: secanim 1s ease-in-out;
}
.sty2 {
    overflow: hidden;
}

@keyframes firanim {
    from {top:-50px;}
    to {top:0px;}
}
@keyframes secanim {
    from {left:-55vw;}
    to {left:0px;}
}

Hopefully, this information is useful for you! :)

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

Struggling to retrieve a response from the ListUsers endpoint in OKTA using the okta-sdk-nodejs Client's listUsers function

Code snippet: async fetchUsersByEmail(email) { try { return await Promise.all([ oktaClient.listUsers({ search: email, }), ]).then((response) => { console.log(response); }); } catch (error) { ...

javascriptnode.jsoktaokta-api

Having difficulty with building a basic module in Node JS, it's just not cooperating

As a newcomer to Node JS, this platform, and the English language, I apologize in advance for any linguistic errors. I seem to be encountering a "return" error within my code. Specifically, when I include the hi.myFunc(); function, I receive the ...

javascriptnode.js

Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...

javascripthtmljquerycss

Top method for changing an array in javascript

I'm in the process of building a react application, and I've received the following array from an API call. var arrayLike ={ "2020-W1": [ { "type": "TAX_REFUND_IN_INT", &q ...

javascriptarraysreactjs

When attempting to incorporate a video using Sencha, an error occurs stating that the resource is being interpreted as an image but is being

While attempting to incorporate a sample into Sencha, I encountered an error stating "Resource interpreted as Image but transferred with MIME type text/css". Ext.define('MyApp.view.Newpage', { extend: 'Ext.Video', xtype: ' ...

javascripthtmlextjs

jquery causing issues with content loading

Greetings everyone, I have been attempting to load content into a div using this tutorial with the help of jQuery. However, I am encountering an issue where when I click on the link <a href="about.html" class="panel">Profile</a> , it loads ...

jqueryajaxhtml

v-for loop to populate dropdown menu with identical values

Recently, I started working on a points counter app using Vue.js and encountered some issues with the v-for loop and dropdown menu functionality. Within my Vue.js application, I have an array of players as shown below: var app = new Vue({ el: '#l ...

javascripthtmlvue.js

Using jQuery and regex to only allow alphanumeric characters, excluding symbols and spaces

Seeking advice, I am using a jquery function called alphanumers var alphanumers = /^[a-zA-Z0-9- ]*$/; which currently does not allow all symbols. However, I now wish to disallow the space character as well. Any suggestions? ...

javascriptjquery

A mysterious property appearing in a Webpack plugin

Here is my webpack configuration file and package.json. When I execute the command webpack -w, I encounter the following error (shown below). I suspect it may be related to path strings. Any help would be greatly appreciated. webpack.config.js const HtmlW ...

javascriptnode.jswebpacknpm-start

Looking for a way to assign customized thumbnails to images in react-responsive-carousel and react-image-magnifiers?

I am currently working on a product viewer using react-responsive-carousel and react-image-magnifiers. Following an example from this GitHub repository, I encountered an issue with mapping custom thumbnails correctly. Although hard-coding the array works f ...

javascriptreactjsnext.jsthumbnails

Trouble accessing nested components in Angular CLI beyond the first level of components

I'm diving into Angular CLI for the first time and trying to recreate a previous web project of mine. I've managed to nest and display components inside the root component successfully, but after that, I'm facing issues referencing any compo ...

javascriptangulartypescriptangular-components

Error: Unable to access the property '_locals' of an undefined value

I have been experimenting with nodejs on my Ubuntu 16.04 system, where I successfully installed Node and npm. However, I encountered an error stating "TypeError: Cannot read property '_locals' of undefined" while trying the following code: var e ...

javascriptnode.jsexpressubuntu-16.04

Unusual behavior: Django app not triggering Ajax XHR onload function

I'm currently working on a Django app that features user posts, and I'm in the process of implementing a 'like' / voting system. Initially, I set up this functionality using complete page refreshes combined with a redirect after the vot ...

javascriptdjangoajaxxmlhttprequest

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

javascripthtmlvideowebhtml5-video

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

javascriptjqueryhtmlcss

attempting to retrieve the selected values from within an iframe

I'm attempting to access the values of an iframe element select within a dialog on my page. In my JS file, I wrote code to access a select with the ID "firstSelectms2side__sx", but it didn't work as expected. Setting aside the iframe, I also tr ...

javascriptjqueryiframe

JavaScriptCore now includes the loading of AMD modules

I am trying to incorporate a JavaScript module into JavascriptCore on iOS. To achieve this, I am fetching the file's text through a standard HTTP request on the iOS platform. Once I have obtained the entire string, I plan to parse it into the JSconte ...

javascriptrequirejsrequireamdjavascriptcore

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil <div class="myDiv"> <img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"> </div> My goal is to have the image source c ...

javascriptjqueryhtmlcss

Unable to alter a global variable while iterating through an angular.forEach loop

I've encountered a challenge while attempting to modify a global variable within an Angular.forEach loop. Although I can successfully update the variable within the loop, I'm struggling to maintain those changes when accessing the variable outsi ...

javascriptangularjs

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

javascriptjqueryangulardatatablesangular-datatables