Animation Behavior

Author Posts

jlmarra April 13, 2021 at 5:17 am

Hello,

I’m using the Kadence theme along with Kadence Blocks. When I animate an Advance Heading it works fine on desktop but I noticed on a tablet device and phone as I scroll down to the Advanced Heading it appears briefly then the animation executes.

So for example…
Animation = fadeInLeft
Duration = 2s
Timing Function = ease
Event = inView(once)

So as I scroll down and the targeted heading comes into view it’s there briefly and then it disappears and the animation runs. Both devices are Android, which happens in Chrome and Firefox. The desktop is fine. I wasn’t really planning to run the animation on phone, it would be nice to have it on a tablet. I tried different animations and the same behavior.

I have 2 other Advanced Heading items that animate correctly but they are within page view when the page loads. It’s the Advanced Heading item that isn’t in view.

Thank you for your replies.

Best regards,

John

Sebastian April 13, 2021 at 9:51 am

Hey John,

The solution here is normally to hide the element initially, and then let the last frame of the animation (which unhides it) persist. To do this, set the opacity of the element to 0 via the Behaviour property group. And then set the animation-fill-mode property to forwards. That will ensure the opacity: 1 in the animation’s final keyframe will stick after the animation finishes.

However, there are some issues with the stock animations like fadeInLeft if you have !important globally defined. As the !important opacity: 0 overrides the keyframe opacity: 1 rule.

I need to correct this by dynamically updating the stock animations based on the users preference for global !important. But in the meantime, if you want to keep global !important on, you can work around this by using a custom animation. Paste the following code to the full code editor (View > Full code editor > CSS).

@keyframes myFadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1 !important;
    -webkit-transform: none;
    transform: none;
  }
}

Then, go back to the main GUI view (View > Full code editor > toggle off) and change the animation name value from fadeInLeft to myFadeInLeft. That should do it.

Let me know how you get on.

Thanks,
Sebastian

jlmarra April 15, 2021 at 7:11 pm

Hi Sebastion,

Thank you for your prompt reply. So based on your suggestion I opted to turn !important off in the Preferences. I assume I only need to turn it on, on a case by case basis assuming whatever styling is not appearing.

I then used your suggested settings which worked…
“The solution here is normally to hide the element initially, and then let the last frame of the animation (which unhides it) persist. To do this, set the opacity of the element to 0 via the Behaviour property group. And then set the animation-fill-mode property to forwards. That will ensure the opacity: 1 in the animation’s final keyframe will stick after the animation finishes.”

I did try this with a ZoomIn and it caused the target to not appear > appear during the animation > disappear after animation. I just substituted it with a FadeIn effect.

Thank you for your assistance.

Best regards,

John

Sebastian April 16, 2021 at 9:29 am

Happy to help John!

Looking at the zoomIn animation, that may not have worked because opacity:1 is set on a 50% keyframe, rather than 100% (or to), and I think only styles on the 100%/to keyframe stick when animation-fill-mode is set to forwards.

Here’s the ZoomIn animation code:

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

And here is the fadeIn animation code:

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

You must login or register to reply to this topic.