Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 17, 2016 at 4:13 pm #649860
    rhkittredge

    I would like to know how to delay the initial display and animation of the captions for the full screen slider. Basically what I want is for the image to show, then for about 2 seconds to pass before the captions appear with their animation. What happens now is the image shows and the captions appear and animate immediately. I have no problem with the speed of the animation itself; I just want to delay the initial display of the captions and their animation.

    Thank you!

    June 19, 2016 at 10:11 am #650375
    Rikard

    Hi rhkittredge,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    June 20, 2016 at 3:55 pm #650891
    rhkittredge

    The site I’m working on is currently unavailable as it’s on a local machine. However, this demo page is basically the same design as mine: http://kriesi.at/themes/enfold-health-coach/

    You’ll see that when the large background image appears, the content in the middle of the screen (“Hi, I’m Emma Fold” etc) shows up almost instantly. What I am looking for is a delay before any of the content in the middle of the page shows up. I.e. show the full screen background image, wait 1.5 to 2 seconds, and then animate the content in the middle of the screen.

    Thanks!!

    June 22, 2016 at 5:10 am #651868
    Ismael

    Hi,

    Thank you for the info. Adjust the transition-delay property:

    .avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title {
    visibility: visible;
    -webkit-animation: caption-left 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1) 2s;
    animation: caption-left 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1) 2s;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-content, .avia_transform .av_fullscreen .active-slide .avia-caption-content {
    visibility: visible;
    -webkit-animation: caption-right 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1) 2s;
    animation: caption-right 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1) 2s;
}

    It’s the last value (2s) in the css property. Adjust it as needed.

    Best regards,
    Ismael

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