Difference In FadeInLeft Behavior In SP Page Builder 6.7.1
Miguel
Hello,
We are seeing a difference in animation behavior between SP Page Builder 5.2.4 and SP Page Builder 6.7.1.
On our staging site, we are using:
SP Page Builder 5.2.4 Helix Ultimate 2.0.18 Joomla 4.4.1
On the live site, we are using:
SP Page Builder 6.7.1 Helix Ultimate 2.2.8 Joomla 5.4.7
The specific issue is the following:
In the previous version, FadeInLeft had a very subtle horizontal movement. The element appeared from a position only slightly shifted to the left, without giving the impression that it was entering from the edge or boundary of its container.
However, in SP Page Builder 6.7.1, we are seeing that FadeInLeft has a much more noticeable movement and visually looks quite similar to FadeInLeftBig.
In other words, both effects now seem to have a similar amount of horizontal movement, whereas previously the difference between them was much clearer:
FadeInLeft: short and subtle movement. FadeInLeftBig: long and noticeable movement from the left.
The addon configuration is the same in both cases, and we have also checked the applied classes and animation duration.
Thank you!
Mehtaz Afsana Borsha
Accepted AnswerHI,
Thank you for the detailed explanation and for providing the version information.
The animation duration controls how long the animation takes, but the horizontal travel distance comes from the CSS transform defined in the animation keyframes. This is why the same duration and the same FadeInLeft class can still look different between versions.
From your description, the FadeInLeft animation in SP Page Builder 6.7.1 is starting farther to the left than it did on your SP Page Builder 5 site. That would also explain why it now looks much closer to FadeInLeftBig.
If you want to keep the older, more subtle movement, you can override the FadeInLeft animation with custom CSS:
@keyframes sppbFadeInLeftSubtle {
from {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.sppb-wow.fadeInLeft {
animation-name: sppbFadeInLeftSubtle !important;
}You can adjust -30px to -20px, -40px, etc. depending on how subtle you want the movement to be.
I would recommend using this override rather than changing the animation duration, since duration changes the speed but not the starting distance.
-Regards.
Addington
Accepted AnswerYou need to update to 6.8.0. I am not saying it will fix this issue (it won't) but it will patch a lot of vulnerabilities that you really want to be patched!
Mehtaz Afsana Borsha
Accepted AnswerHi,
Please keep a full site backup and try the latest version of page builder.