Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 10, 2025 at 10:19 am #1490014
    sitesme

    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

    October 12, 2025 at 2:16 pm #1490076
    Mike

    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

    October 13, 2025 at 11:42 am #1490121
    sitesme

    Excellent! This is exactly what we needed.

    Thank you, Milke.

    October 13, 2025 at 4:13 pm #1490132
    Rikard

    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

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