How can I change text animations so that they just show up in their own space?

Question

I was adding some animations with CSS to the site I was working on. But the overflow: hidden attribute doesn't seem to work the way I expected it should. Here's my code.

.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;}
}



  
    
    

  
    
    
  

    lorem ipsum
  
  
    
        Under Development
        
        
          
            
              About
            
            
              Follow
            
          
        
    


    
    
      
        welcome!
        
        lorem ipsum lorem LOREM IPSUM.
        
        
        lorem ipsum lorem ipsum lorem.

So is there any additional class missing in my code or anything wrong I am using? Because I was expecting the span element with .lead class to just show in his own space not like some text flying over to the place from somewhere. I am hoping you'll get what i wanted to say.

user_10564525 · Answer

You are animating the whole box (.sty1 and .sty2), the text (.lead) its not outside the (.sty1 and .sty2) thats why its not getting hidden by overflow: hidden

you need to keep the (.sty1 and .sty2) in thier place and animate .lead

try this

.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;
  }
}

user_1113766 · Answer

your animation it's set on the .leads container(.sty1 and .sty2), so that's the one that it's moving , your lead are moving along with it, to fix it you can wrap those in a div with a class that will have its overflow to hidden, like this

I added a animation-container and set overflow:hidden, see 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;
  }
}





  
  

  
  
  
  

  Anurag Srivastava - Portfolio



  
    Under Development
    
    
      
        
          About
        
        
          Follow
        
      
    
  



  
    
      welcome!
      
        
          lorem ipsum lorem LOREM IPSUM.
        
      
      
        lorem ipsum lorem ipsum lorem.

user_4384833 · Answer

Try the following HTML:



  
    
    

  
    
    
  

    Anurag Srivastava - Portfolio
  
  
    
        Under Development
        
        
          
            
              About
            
            
              Follow
            
          
        
    


    
    
      
        welcome!
        
        lorem ipsum lorem LOREM IPSUM.
        
        
        lorem ipsum lorem ipsum lorem.

And the following 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;}
}

Hope it helps! :)

How can I change text animations so that they just show up in their own space?

3 Answers