Fade transition does not appear to be working correctly

[grangeway]

Hello,

I've been trying to use the fade transition, which I was expecting to replace one image with another, however I'm either getting a different transition; or there's some animation happening during the fade.

I've included a video below

Untitled.1.mp4

Template to define the gallery is as follows, div element defining image has ta-gallery-anim-fade on it:

<!-- Start Slider -->
<div
    class="ta-gallery ta-gallery-size"
    x-data="taGallery()"
    x-init="init()"
    data-autoplay="true"
    data-interval="3000"
    data-min-height="30rem"
>
  {% if page.media.images is not empty %}
    {% set images = page.media.images %}
    {% for image in page.media.images if "header" in image.filename  %}
    {% else %}
      {% set images = page.find('/headers').media.images %}
    {% endfor %}
  {% else %}
    {% set images = page.find('/headers').media.images %}
  {% endif %}
    {% for image in images if "header" in image.filename  %}

    <div class="ta-gallery-element ta-gallery-anim-fade">
      <figure>
          <img
              src="{{ image.grayscale().contrast(20).brightness(-125).colorize(-35,81,122).url }}"
              class="ta-gallery-image"
              loading="lazy"
              height="100%"
          >

          <div class="pt-32 md:p-48 text-6xl font-bold text-center text-white opacity-75">
            {{ page.title }}
          </div>

          {{ page.subheading }}

        <figcaption class="ta-gallery-image-caption text-sm font-semibold text-white bg-gray-900 bg-opacity-25 bg-blur-2 px-4 py-1">
          {% if config.plugins.breadcrumbs.enabled %}
            {% include 'partials/breadcrumbs.html.twig' %}
          {% endif %}
        </figcaption>
      </figure>
    </div>
     {% endfor %}
</div>
<!-- End Slider -->

[markusantonwolf]

Hi @grangeway - I change the default settings of TA-Gallery so the fade animation is now in the default animation set. Should fix the issue.

Additionally: I changed the animation of the lazy load example to "fade" so you can check it out: https://ta-styled-plugins.com/ta-gallery/examples/

[grangeway]

Thanks - i'm going to need to check this properly as i'm not sure it's changed for me, at least that looks to still be doing a slide.

Untitled.2.mp4

Really, what I was looking to stop is the animation around the image - i.e. would like a fade without a border change

[markusantonwolf]

@grangeway do you have an online example of your page? Link?

BTW: the fade animation does a little bit of scaling to make the animation more smooth. So if you don't want this scaling you can add your own transition: https://ta-styled-plugins.com/ta-gallery/transitions/#add-you-own-slide-effects

[markusantonwolf]

@grangeway I changed the fade transition and removed the scale effect in v2.0.3

[grangeway]

@markusantonwolf Thanks :) -that's certainly looking more like I'd expect fade to work. Interestingly, either in your fix (I can't see where) or in tailwindcss/typography - it fixed bg-opacity being applied correctly to the figcaption class.

[markusantonwolf]

Perfect :-)