Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #505782

    Is there a way to change the animations on the title, subtitle and button? I’d like all of the elements to fade in at the same time (.5s after pageload).

    Thanks for your help.


    *more specifically, have those elements fade in at the same time for each slide .5s after the slide transition.



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

    Best regards,


    Sorry, Rikard, but the site is currently only installed locally as it gets built out. I did add this to the Quick CSS to stop the animation altogether:

    .avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title, .avia_transform .av_slideshow_full .avia-caption-content, .avia_transform .av_slideshow_full .avia-caption-title, .avia_transform .av_fullscreen .avia-caption-content, .avia_transform .av_fullscreen .avia-caption-title, .avia_transform .avia-slideshow-button {
      animation: none !important;
      -webkit-animation: none !important;
      visibility: visible !important;

    But I’d like the elements (title, caption and button) to fade in together (right now there’s no fade or motion at all).

    Hopefully that helps identify what I’m trying to do more clearly.


    If you go to this demo you can see the Title, Caption, and buttons all fade in and move:
    – “NEW SPRING EDITION FOR WOMEN AND MEN NOW AVAILABLE” slides in from top (with fade)
    – “The new beautiful spring collection, created by star designer Konrad Kries is now available.” slides in from bottom (with fade)
    – “Women’s Collection” and “Men’s Collection” both slide in from top (with fade, and I think a delay as well)

    I’d like to have all of those elements fade in at the same time without any motion.

    Thanks for you help – and sorry for being unclear before.



    In the /enfold/css/shortcodes.css file around line 4450 you should see the CSS animations setup.

    @keyframes caption-top {
      0%   { transform:translate(0,-20px); opacity: 0;  }
      100% { transform:translate(0,0); opacity: 1; }

    Remove the transform declarations like so.

    @keyframes caption-top {
      0%   { opacity: 0;  }
      100% { opacity: 1; }

    So only opacity is left.



    Thanks! I’ll try that out.



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


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