html5 translate from left then minimize length x when window resizing

Question

User-418973555 posted

when animation translate (or sliding in from right to left ) to the end of the right side window, the div position is not a problem when window resizing,

but when animation translate left to right, try to minimize the length x of the translatex , according to the window resizing, 

  #menuslider1:hover ~ .menutitle2 {

           
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            
         }

           @keyframes slide-in-left {
              0% {
                
                        transform: translate(0);
                        
                        opacity: 0;
              }
              100% {
             
                        transform: translate(900%, 0%);
                      
                        opacity: 1;
              }
            }

not sure why it has to be 900% to stretch to the near middle of the windows,

Answer 1

User839733648 posted

Hi larnvok09,

According to your description and code, I'm sorry that I could not reproduce your issue successfully.

If possible, please provide more detailed codes like related html code( containing menuslider1 menutitle2) so that it will be easier to help with you.

Best Regards,

Jenifer

Answer 2

User-418973555 posted

after menuslider1 transition: all 0.5s ease to the right; would like to make the font in div scalable (smaller to the left) according to window resizing,

   .menutitle2
        {
            padding-top:25%;
            margin-left:-3.5%;
            font-family:Arial;
            font-size:10pt;
            position : absolute;
	      
        }

#menuslider1
        {
          
          left:0%;
          background-color:#a51013;
          ;
          width: 5%;
          height: 100%;
          
          transition: all 0.5s ease;
         
        }

  #menuslider1:hover 
        {
          width:30%;
          height: 100%;
         
          /*animation: scale-in-hor-left 0.5s ease-in both;*/
          
        }

#menuslider1:hover ~ .menutitle2 {

animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}

@keyframes slide-in-left {
0% {

transform: translate(0,0);

opacity: 0;
}
100% {

transform: translate(900%, 0%);

opacity: 1;
}
}

function AnimationListener() { .. var boxThree = document.getElementsByClassName('menuslider1')[0]; boxThree.addEventListener("transitionstart", MenuSlider1AnimationListener, false);

Answer 3

User839733648 posted

Hi larnvok09,

How is your html code designed? And what is transitionstart?

I'm not clear about how menutitle2,menuslider1 display on the page.

Best Regards,

Jenifer

Answer 4

User-418973555 posted

okie, since the menuslider1 is with animation transition, by adding an eventlistener as 'transitionstart', is likely to lead to another animation event, but the concern here is the menutitle2, after menutitle move from left to right, it stays there, while staying there, trying to make it scalable according to window resizing, so it will minimise length to the right accordingly 

 <div id="menuslider1" class="menuslider1"></div>
                           
                              <div id="menutitle" class="menutitle">Menu</div>
                        <div id="menutitle2" class="menutitle2" >Content</div>

Answer 5

User839733648 posted

Hi 

after menuslider1 transition: all 0.5s ease to the right; would like to make the font in div scalable (smaller to the left) according to window resizing,

Do you want the effect like this?

If so, you just have to modify the following codes.

        @keyframes slide-in-left {
            0% {
                transform: translate(0,0);
                opacity: 0;
            }

            100% {
                transform: translate(150%, 0%);
                opacity: 1;
            }
        }

Best Regards,

Jenifer

Answer 6

User-418973555 posted
actually stretching out to 900% is to reach far right end of the red menuslider, but I dun think it's a good idea for the value 900%

Answer 7

User-418973555 posted

think minor changes here solve abit, with menutitle2 adds width: 5%

.menutitle2
        {
            padding-top:25%;
            margin-left:0%;
            width:5%;
            font-family:Arial;
            font-size:10pt;
            position : fixed;
	        /*animation: scale-in-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;*/
            /*float:right;*/
            
        }

 @keyframes slide-in-left {
              0% {
                -webkit-transform: translateX(0);
                        transform: translate(100%,0);
                        /*transform: scaleX(0);*/
                opacity: 0;
              }
              100% {
                -webkit-transform: translateX(0);
                        transform: translate(350%, 0%);
                        /*transform: scaleX(5);*/
                opacity: 1;
              }
            }

strange that transform, translate still needs 350%, 

Answer 8

User839733648 posted

Hi larnvok09,

From my point of view, this is because of the attribute transform: translate itself.

The animation of it is complex, so we need to try testing to meet our requirement.

Best Regards,

Jenifer