left to right and right to left animation modification - Support

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
December 13, 2020 at 6:20 pm #1266915
bobfurgo
Participant
HI guys! I used to use this CSS snippet to modify the left to right and right to left animation. It used to work well but now it doesn’t seem to work anymore. Here it is:
```
.avia_transform .avia_start_delayed_animation.left-to-right {
    -webkit-animation: avia-ltr .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    animation: avia-ltr .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    opacity: 1 !important;
}

.avia_transform .avia_start_delayed_animation.right-to-left {
    -webkit-animation: avia-rtl .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    animation: avia-rtl .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    opacity: 1 !important;
}
```
December 13, 2020 at 7:15 pm #1266920

Guenni007
Participant

this is nearly the same rule from shortcodes.css – and you only want to overwrite the timing to 0.7s

one difference is that original shortcodes.css has 0.8s – and allthough i could not imagine that the 0. is mandatory try it with 0.7s instead of .7s

and you do not see the code on developer tools to be active? because i couldn’t see a difference of 0.1s

December 14, 2020 at 3:53 pm #1267195

bobfurgo
Participant

when i used this css before, it removed the “bounce” and made the animation feel more smooth. It didn’t just change the duration. Maybe I have the wrong snippet though

December 16, 2020 at 5:37 am #1267673

Ismael
Moderator

Hi,

Thank you for the update.

The animation seems to be working as it should, the slight bounce at the end of the effect is still there. We checked the site on Chrome Windows 10 as seen in the screenshot below.

Screenshot: https://imgur.com/a/FkYlidc

Best regards,
Ismael

December 20, 2020 at 5:43 pm #1268803

bobfurgo
Participant

Hi Ismael, I want to actually remove the slight bounce and slow down the animation so it feels a bit more fluid.

December 22, 2020 at 4:44 am #1269213

Ismael
Moderator

Hi,

Thank you for the info. Try to replace the animation-timing-function to linear from cubic-bezier.

// https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Best regards,
Ismael

December 22, 2020 at 4:05 pm #1269354
bobfurgo
Participant
Hi, thanks! where in the code would i make this medication and how? Sorry, not a developer so I’m not sure what to do..
```
.avia_transform .avia_start_delayed_animation.left-to-right {
    -webkit-animation: avia-ltr .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    animation: avia-ltr .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    opacity: 1 !important;
}

.avia_transform .avia_start_delayed_animation.right-to-left {
    -webkit-animation: avia-rtl .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    animation: avia-rtl .7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    opacity: 1 !important;
}
```
December 27, 2020 at 4:14 am #1269850
Ismael
Moderator
Hi,

You could replace this part of the animation property.
```
cubic-bezier(0.175, 0.885, 0.320, 1.275)
```
The code should look something like the following.
```
.avia_transform .avia_start_delayed_animation.left-to-right {
    -webkit-animation: avia-ltr .7s 1 linear !important;
    animation: avia-ltr .7s 1 linear !important;
    opacity: 1 !important;
}
```
For more info, please check the following link.

// https://www.w3schools.com/css/css3_animations.asp

Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.