Carousel: Text and image animation not working properly

  • Resolved kawaii_mihoko

    (@kawaii_mihoko)


    4 years, 7 months ago

    I have two issues with the carousel widget that I’ve been tackling with for several days and still unresolved. I’m hoping that someone would know the solution or be able to point me in the right direction.

    Link to carousel

    1. The coloured text on the second slide:
    – When that second slide comes in, for a split second at the beginning, the text pushes to the left and out of view before the proper entrance animation begins.
    – This happens only on the second slide and on the first run when the carousel is loaded/looped.

    I’ve tried reordering the slides and the same bug happens to whatever the second slide is, so I know it’s not my slide design.
    – The text is in Elementor’s text widget.

    Would anyone have any ideas on why this happens?

    2. Image animation mistiming
    – In my slide design, the background image is set up with animation that is timed to run when the slide comes in view.
    – In order for the animation to happen when a slide appears, and I realize this while working with the carousel widget though, the animation duration needs to match the total length of the entire loop, including slide and transition time (e.g. (5 seconds per slide + 1 second transition) = 6 seconds x 2 slides = 12 seconds), and not the duration of only the animation portion when the slide appears (e.g. 5 seconds).
    – In other words, the animation duration is set as follows: 5 seconds per slide + 1 second transition + X seconds as remaining length of time for one whole slider loop.
    – To ensure the actual image animation matches when the slide appears, a timing delay needs to be added to each slide (e.g. for two slides, the second slide’s animation has a 6-second delay, third slide has a 12 second delay, etc.)
    – The above is all done in my slide template, in Elementor’s Image Widget – Custom CSS

    The set up described above works fine if the slider is left to run on its own course, but if a user clicks on a navigation dot to see a different slide, the animation would be off because it is running respective of the whole slider loop’s length and where it is at, rather than when the slide appears. (e.g. If you’re on the third slide and click to see the first slide, the first slide’s image animation hasn’t set to begin yet).

    Note: The text’s entrance animation begins correctly every time I click the navigation dot to see a slide.

    So my question is, is there a way to set the image animation so that it will run in sync when a slide appears? (e.g. Animation duration is set to 5 seconds and run when the slide appears, but how?)

    Any feedback, ideas or leads appreciated. TIA!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @kawaii_mihoko,

    Hope you’re doing well today ??

    Well, I have checked the page you sent, and I was able to reproduce the animation issue. Actually, it happens only when you set a delay to the entrance animations. So, I’ve addressed that to the dev team and it’s already fixed in the development version and will be included in the next release of the plugin.

    On the other hand, regarding image animation. Could you please elaborate a bit more on how you added these animations as we can’t change any setting related to the templates content inside the carousel through the carousel widget settings itself.

    Regards.

    Thread Starter kawaii_mihoko

    (@kawaii_mihoko)

    Hi leap13support,

    Thanks for having an answer to the entrance animation!

    As for the image animation, here is what I did:
    – Add Elementor’s Image widget
    – Define a Class ID
    – In the widget’s custom CSS: add the CSS (animation and @keyframes) for the new Class ID

    Initially, I set the animation to the timing of one slide (5 seconds + 1 second transition = 6 seconds) but it doesn’t work. The animation for every slide starts when the slider runs instead of when the slide appears, so by the time you reach the second and third slide, etc., all animations are over because they all have run when the first slide appears.

    My solution is to set the image animation to run the entire course of one loop of the slider and not a single slide.
    For example, 5 seconds + 1 second transition for 5 slides = 6 x 5 = 30 seconds.

    Plus, to sync up the start of the animation and when the slide appears, I added an animation-delay to the image CSS.

    The set up above works when the slider is left to run in infinite loop; however, the visual effect of the animation fails when users click on the carousel’s navigation dots to see a particular slide. The animation is running according to the slider’s clock and not when a slide appears. The users see whatever the image is set to be animated at that moment in the slider loop when the slide is not supposed to be in view.

    If it helps, here’s my complete Custom CSS:

    Note: in @keyframes, 0% to 20% is the actual image animation, the rest is extra code to extend the time to the end of one slider loop and to reset the animation to its initial state for the next time the slide is run.

    .hpslider-gloves3-img {
    width: 100%;
    height: 100%;
    transform: translateY(-100vh) scale(1.15);
    z-index: -1;
    animation: pan-gloves3 30s infinite;
    animation-delay: 6s;
    -moz-animation: pan-gloves3 30s infinite;
    -moz-animation-delay: 6s;
    -webkit-animation: pan-gloves3 30s infinite;
    -webkit-animation-delay: 6s;
    -o-animation: pan-gloves3 30s infinite;
    -o-animation-delay: 6s;
}

@keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(-100vh) scale(1.15);
    }      
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-moz-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-webkit-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-o-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

    Please let me know if this helps and if you need further information. Thanks!

    Plugin Author Leap13

    (@leap13)

    Hi @kawaii_mihoko

    Hope you’re doing well today ??

    Referring to your reply above, animation is added as custom CSS, so I suppose this is an issue related to the code you added to run the animation, not the carousel widget itself.

    Our devs would be glad to check this to see if something like that can be optimized to work fine with navigation using arrows, so you’re most welcome to send us a message on our website.

    Regards

    Thread Starter kawaii_mihoko

    (@kawaii_mihoko)

    Hi Leap13,

    Thanks for the additional information!
    Too bad that custom CSS animation applied to a widget is not coded to render the same way as ‘Entrance Animation’ would but I will live with that.

    Thanks again for looking into my questions!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Carousel: Text and image animation not working properly’ is closed to new replies.

Tags