Animation Behavior

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 3 weeks ago.

Author Posts

jlmarra

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

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

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

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.