During animation, I can see the gost of the previus slide on the left of the new slide

[db-conception]

Hello,

I am trying to set animation on the gallery mode. But I have a strange behavior.
I can see the "gost" of the previus slide on the left when i change of slide.

Context :
I change of slide via your js api..

First slide :

Diring the sliding :

Video :
https://www.dropbox.com/scl/fi/bw24b7h7ry6rdeops7rjh/KCHADEN-Kchaden-Vivaldi-2025-07-31-13-10-48.mp4?rlkey=ze3j5mz3fh55dwubit5zjrqd3&dl=0

Code :

// Configuration Tiny Slider pour contrôle programmatique uniquement
            this.sliderInstance = tns({
                container: this.selector,
                items: 1,
                slideBy: 1,
                
                // Désactiver les contrôles utilisateur
                controls: false,
                nav: false,
                mouseDrag: false,
                touch: false,
                swipeAngle: false,
                preventActionWhenRunning: true,
                preventScrollOnTouch: 'auto',
                
                // Animation fade
                mode: 'gallery',
                speed: 1000,
                axis: 'horizontal',
                // animateIn: 'tns-fadeIn',
                // animateOut: 'tns-fadeOut',
                // animateDelay: 300,

                animateIn: 'slideInDown',
                animateOut: 'slideOutDown',
                // animateNormal: 'tns-normal',
                animateDelay: 1000,
                
                rewind:false,
                loop: false,
                
                // Désactiver l'autoplay
                autoplay: false,
                
                // Responsive (une seule slide à la fois)
                responsive: {
                    640: {
                        items: 1
                    },
                    900: {
                        items: 1
                    }
                }
            });

To change of slide :

this.sliderInstance.goTo(index);

The php code :

public function render()
	{
		// Générer un ID unique pour chaque instance
		$slider_id = 'dbc-optin-slider-' . $this->id;
		$nonce = wp_create_nonce('dbc_optin_action');
		?>
		<div class="optin-slider-root" id="<?php echo esc_attr($slider_id); ?>"
			data-slider-id="<?php echo esc_attr($this->id); ?>" data-nonce="<?php echo esc_attr($nonce); ?>">
			<div class="dbc-optin-slide dbc-slide-subscribe-1">
				<div class="dbc-slide-subscribe-1-content">
					<div class="dbc-form-line">
						Créer un compte ou <a href="#" alt="se connecter" rel="nofollow" class="goto-login-slide">se connecter</a>
					</div>
					<div class="dbc-form-line line-input-button">
						<input type="email" name="email" id="optin-subscribe-email-<?php echo esc_attr($this->id); ?>"
							placeholder="Votre adresse email" required>
						<button type="button" class="btn-subscribe" data-element-id="<?php echo esc_attr($this->id); ?>">
							<span class="btn-text">Créer un compte</span>
							<span class="btn-loading" style="display: none;">Inscription en cours...</span>
						</button>
					</div>
					<div class="dbc-form-line">
						<div><small>Pas besoin de mot de passe, nous vous enverrons un lien de connexion</small></div>
					</div>
					<div class="dbc-form-line line-confidentiality">
						<input type="checkbox" name="subscribe-conf" id="subscribe-conf-<?php echo esc_attr($this->id); ?>"
							required>
						<label for="subscribe-conf-<?php echo esc_attr($this->id); ?>">J'accepte de recevoir des mails pour me
							connecter
							et à la sortie de nouveaux drops</label>
					</div>
					<div class="dbc-form-line dbc-error-message" style="display: none; color: red; margin-top: 10px;"></div>
				</div>
			</div>
			<div class="dbc-optin-slide dbc-slide-subsribe-2">
				<h2>Plus qu'une étape</h2>
				<p>Cliquez sur le lien que nous vous avons envoyé par mail pour valider votre inscription. Pensez à vérifier vos mails</p>
			</div>
			<div class="dbc-optin-slide dbc-slide-login-1">
				<div class="dbc-form-line">
					Se connecter ou <a href="#" alt="créer un compte" rel="nofollow" class="goto-subscribe-slide">Créer un compte</a>
				</div>
				<div class="dbc-form-line line-input-button">
					<input type="email" name="email" id="login-email-<?php echo esc_attr($this->id); ?>"
						placeholder="Votre adresse email" required>
					<button type="button" class="btn-login" data-element-id="<?php echo esc_attr($this->id); ?>">
						<span class="btn-text">Se connecter</span>
						<span class="btn-loading" style="display: none;">Connection en cours...</span>
					</button>
				</div>
				<div class="dbc-form-line dbc-error-message-login" style="display: none; color: red; margin-top: 10px;"></div>

			</div>
			<div class="dbc-optin-slide dbc-slide-login-2">
				<h2>Vous y êtes presque</h2>
				<p>Nous vous avons envoyé un lien de connection par mail. Pensez à vérifier vos spams</p>
			</div>
		</div>
		<?php
	}

css

:root{
    --kchd-color-primary: #9a8a7b;
    --kchd-color-primary-contrast: #fff;
    --kchd-color-clair: #ded6d0;
    --kchd-color-clair-contrast: #000;
}
button.btn-subscribe {
    transition: all 0.3s ease;
    padding: 10px 15px;
    background: var(--kchd-color-primary);
    color: var(--kchd-color-primary-contrast);
}

button.btn-subscribe:hover {
    background: var(--kchd-color-clair);
    color: var(--kchd-color-clair-contrast);
}

.dbc-form-line.line-input-button {
    display: flex;
}

.dbc-form-line.line-confidentiality {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

div.dbc-slide-subscribe-1-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dbc-optin-slide a {
    color: var(--kchd-color-primary);
    transition: text-decoration-color linear 0.3s;
}
.dbc-optin-slide a:hover {
    text-decoration: underline var(--kchd-color-primary) 2px;
}
```