Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1357441

    Dear Support,
    Good day.

    We would like to increase the transition length start -50% from the left side for the avia-ltr, likewise -50% start from right to left.
    Also, I have to increase the timing to 1s or more.
    I have tried the below for left to right.
    @keyframes avia-ltr{
    from{
    margin-left: -50%;
    }
    to{
    margin-left: ;
    }
    }

    This worked on the left side, when this apply on quick CSS, it collapse the transition on the right to left animation.
    Similarly, I have applied the above code for avia-rtl that margin-right: -50%, but no result as expected.
    Kindly guide me.

    Thank you& Regards
    Anish Appukuttan.

    #1357446

    Hi Anish,

    Thanks for contacting us!

    Please edit your column elements and go to Advanced > Animation > Animation Duration field and increase it as needed – https://imgur.com/a/TzjcweO

    If that is not what you meant, please elaborate :)

    Regards,
    Yigit

    #1357554

    Hello Yigit,

    Good day.
    I will change the animation settings to increase the duration as advised.
    On the other hand, I am looking for modifying the distance of animation.
    I believe that, the default Left to Right animation start from a small distance, at inside the media size.
    I would like to modify both left to right and right to left, by starting from outside the media to reach inside.

    Kindly advice.

    Thank you & BR.
    Anish Appukuttan

    #1357633

    Hi,

    Thank you for the update.

    Try to use this css code to adjust the distance of the avia-ltr animation.

    /*fade in animation*/
    @-webkit-keyframes avia-ltr {
    	0% {
    		-webkit-transform: translate(-30%, 0);
    		opacity: 0;
    	}
    
    	100% {
    		-webkit-transform: translate(0, 0);
    		opacity: 1;
    	}
    }
    
    @keyframes avia-ltr {
    	0% {
    		transform: translate(-30%, 0);
    		opacity: 0;
    	}
    
    	100% {
    		transform: translate(0, 0);
    		opacity: 1;
    	}
    }
    

    Default transform value is -10%.

    Best regards,
    Ismael

    #1357713

    Dear Ismael,

    Thank you for the solution, I have also found another script that works well as below.

    /*Animation Start*/
    @keyframes avia-rtl {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
      }
    }
    
    @keyframes avia-ltr {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
      }
    }
    
    @keyframes avia-btt {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
      }
    }
    /*Animation Stop*/

    Thank you so much for the support.
    BR
    Anish Appukuttan

    • This reply was modified 2 years, 5 months ago by qhsedirectory.
    #1357719

    Hi,

    Thanks for sharing your code :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1357875
    This reply has been marked as private.
    #1357878

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘avia-rtl and avia-ltr transition’ is closed to new replies.