Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1490014

    Hi

    There is a short delay animation on Fullwidth Easy Slider that I would like to replicate to all Easy Sliders in the website.
    I am referring to the captions delay. It loads after the image loads, with a short delay of 1 second or so.

    Please refer to the pages in private to understand what I mean.

    Thank you

    #1490076

    Hey sitesme,
    Try this css:

    .avia_transform #top .avia-slideshow .avia-slideshow-slide .av-slideshow-caption {
    	opacity: 0;
    }
    .avia_transform #top .avia-slideshow .avia-slideshow-slide.active-slide .av-slideshow-caption {
      animation-name: delayedSlideUp;
      animation-duration: 2s; /* 1s delay + 1s animation */
      animation-fill-mode: forwards;
      opacity: 0;
    }
    
    @keyframes delayedSlideUp {
      /* 0% to 50% is the 1-second delay period */
      0% {
        transform: translate3d(0, 100%, 0);
        visibility: hidden;
        opacity: 0;
      }
      50% {
        transform: translate3d(0, 100%, 0);
        visibility: visible ;
        opacity: 1;
      }
      /* 50% to 100% is the 1-second slide-up animation */
      100% {
        transform: translate3d(0, 0, 0);
        visibility: visible ;
        opacity: 1;
      }
    }

    After applying it, please clear your browser cache and check.

    Best regards,
    Mike

    #1490121

    Excellent! This is exactly what we needed.

    Thank you, Milke.

    #1490132

    Hi,

    Great, I’m glad that Mike could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Replicate Fullwidth Easy Slider to Easy Slider’ is closed to new replies.