Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 6, 2022 at 7:16 pm #1357441
    qhsedirectory

    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.

    July 6, 2022 at 7:30 pm #1357446
    Yigit

    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

    July 7, 2022 at 3:21 pm #1357554
    qhsedirectory

    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

    July 8, 2022 at 8:38 am #1357633
    Ismael

    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

    July 8, 2022 at 3:02 pm #1357713
    qhsedirectory

    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, 3 months ago by qhsedirectory.
    July 8, 2022 at 3:46 pm #1357719
    Rikard

    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

    July 10, 2022 at 1:54 pm #1357875
    qhsedirectory
    This reply has been marked as private.
    July 10, 2022 at 3:03 pm #1357878
    Mike

    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

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