Tagged: , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 3, 2017 at 5:10 pm #833959
    Truemotionpictures

    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!

    August 8, 2017 at 8:54 pm #836046
    Basilis

    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

    August 13, 2017 at 10:23 am #838192
    Truemotionpictures

    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?

    August 14, 2017 at 8:12 pm #838928
    Truemotionpictures

    Hi Basilis,

    I found a post here and 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?

    August 15, 2017 at 1:43 pm #839274
    Victoria

    Hi Truemotionpictures,

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

    Best regards,
    Victoria

    August 15, 2017 at 6:56 pm #839513
    Truemotionpictures

    Thanks

    August 16, 2017 at 7:04 am #839723
    Rikard

    Hi,

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

    Best regards,
    Rikard

    August 28, 2017 at 10:02 am #844740
    Truemotionpictures

    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

    August 30, 2017 at 1:41 pm #845781
    Victoria

    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

    September 1, 2017 at 10:40 am #846780
    Truemotionpictures

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

    Best

    September 2, 2017 at 6:23 am #847071
    Rikard

    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

    September 3, 2017 at 9:10 pm #847450
    Truemotionpictures

    Hi Rikard,

    you can close it.

    Thanks!

    September 3, 2017 at 11:45 pm #847484
    Mike

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

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Column fade-in animation delay’ is closed to new replies.