Fade transition does not appear to be working correctly
grangeway opened this issue · 6 comments
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 -->
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/
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
@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
@grangeway I changed the fade transition and removed the scale effect in v2.0.3
@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.
Perfect :-)