Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 5, 2024 at 5:29 pm #1436400
    Eleina_Shinn

    Hi,

    I have an image that I’d like the animation to be delayed, to come in a few seconds after the title. I’ve tried using the image selector and then using css like this: animation-delay: 3s;

    But then the image pops in, and then animates in again 3 seconds later. This is the code I used:

    .avia_transform .avia-image-container.av-ltekdrk5-b45db062f84ab63c8b1ab7fb2fb10620 {animation-delay: 3s;}

    Is there a way to stop the initial animation and just use this?

    Thank you – have a coming soon page up so will leave login credentials in private. It’s the home page top grid or Hero section. I have a chat bubble on the left that I’d like to pop in after the Headline Text

    March 6, 2024 at 7:13 am #1436440
    Ismael

    Hey Eleina,

    Thank you for the inquiry.

    Try to add use this css code instead.

    .avia-animate-admin-preview.pop-up, .avia_transform .avia_start_delayed_animation.pop-up {
    animation: avia_image_appear 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    opacity: 1;
    animation-delay: 3s;
}

    Let us know if this delays the animation. Please make sure to purge the cache or do a hard refresh before testing.

    Best regards,
    Ismael

    March 6, 2024 at 3:48 pm #1436508
    Eleina_Shinn

    Hi Ismael,

    Thank you, I’ve added your code and then did a hard refresh, cleared cache, but it didn’t seem to work. Let me know if you think there is something else I could try.

    Also, it looks like the image now pops in, and then it pops in again over itself 3 seconds later.

    Thanks again,
    ~e

    • This reply was modified 8 months, 2 weeks ago by Eleina_Shinn.
    March 8, 2024 at 9:25 am #1436711
    Ismael

    Hi,

    Thank you for the update.

    Looks like it is not possible to override the animation once it is specified. What you can do is disable the animation completely and apply a unique class name (av-custom-pop-up) to the Image element. Then add this css code to create your own animation. 

    .av-custom-pop-up {
	opacity: 0;
	transform: scale(0);
	animation: avia_image_appear_mod 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3s forwards;
}

@keyframes avia_image_appear_mod {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.