Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #833959

    Hi there,

    I have 3 different 1/1 columns on my website’s homepage, placed in a Color Section with a video background.
    I assigned a fade-in animation to each column but, since I’m using the preloader, when the page is displayed the animation has already happened.
    I would like to delay the animation start, like 5 seconds, in order to see it happening after the loading (in most cases the loading is lasting up to 3 seconds).
    Also each column as its own class (home-text-1, home-text-2, home-text-3). I would like to assign to each of them a different delay, so that the 1st text is showing, then the 2nd and finally the third.
    After reading some animation-related post here, I tried to use the following css but it happens that the content is shown without animation, then after 10 seconds the animation is played.

    .avia_transform .avia_start_delayed_animation.fade-in {
        animation-name: avia-fadein;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-delay: 10s;
        animation-iteration-count: 1;
        animation-direction: initial;
        animation-fill-mode: initial;
        animation-play-state: initial;
    }

    Also I wasn’t able to target the custom classes (home-text-1, home-text-2, home-text-3) attached to each column.
    I tried with .home-text-1 .avia_transform .avia_start_delayed_animation.fade-in but it didn’t seem to work.

    Can you please help me to solve this issue?
    Thanks a lot!

    #836046

    Hey Truemotionpictures,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    #838192

    Thank you Basilis,

    that’s a pity… I thought it would be something easy to do.
    Anyway could you please tell me which files to edit in order to change the default animations?

    #838928

    Hi Basilis,

    I found a post here and (Purchase code hidden if logged out) /”>another one here which are touching the topic, providing some code to solve the issue.
    It seems not really true

    that this is is not covered by your support

    and probably I won’t need

    to hire a freelancer

    either.

    Now my question is: is that solution still actual?

    #839274

    Hi Truemotionpictures,

    You can try to apply those solutions to see if they work for you.

    Best regards,
    Victoria

    #839513

    Thanks

    #839723

    Hi,

    Great, please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    #844740

    Hi Rikard!
    Unfortunately the above mentioned solutions were not working in my case.
    I want to apply a delay only to some specific elements, not to all.
    I also tried creating a custom class and applying it to those elements

    .delay-5s {
        -webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
        animation-delay: 5s;
    }

    Strangely the animation starts ignoring the animation-delay and then it plays again at the delay time (see link below).
    Could you please help me with that?

    I also tried

    #845781

    Hi Truemotionpictures,

    I just don’t see the 5s delay rule applied to the elements, so maybe the code does not apply to the elements that you would like?

    Best regards,
    Victoria

    #846780

    Hi I solved it hiring a freelancer!
    Thank you anyway!

    Best

    #847071

    Hi,

    Great, glad you got it fixed and thanks for letting us know. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #847450

    Hi Rikard,

    you can close it.

    Thanks!

    #847484

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

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

The topic ‘Column fade-in animation delay’ is closed to new replies.