Adding animation to text content

[masstechnologist]

Is it possible to animate the text content displayed on top of an image when used as a slideshow?

[nicped]

Yes - made a simple example

When you add .slider-nav-animation it will trigger the script to add .slide-visible to the slides currently being showed. You can use that class to do some animation of the text - here pretty simple using opacity and translate - of course you can use more fancy text animation if you want.

<div class="swiffy-slider slider-nav-visible slider-nav-animation slider-nav-animation-slow" id="animatedText">

                        <ul class="slider-container" id="container1">
                            <li id="slide1">
                                <div>
                                    <img src="../assets/img/photos/img5.webp" alt="..." loading="lazy" class="w-100">
                                    <h1 class="display-1 text-white custom-animated-text position-absolute top-50 start-50 translate-middle">Porsche</h1>
                                </div>

                            </li>
                            <li id="slide2">
                                <div>
                                    <img src="../assets/img/photos/img2.webp" alt="..." loading="lazy" class="w-100">
                                    <h1 class="display-1 text-white custom-animated-text position-absolute top-50 start-50 translate-middle">Woman</h1>
                                </div>
                            </li>
                            <li id="slide3">
                                <div>
                                    <img src="../assets/img/photos/img3.webp" alt="..." loading="lazy" class="w-100">
                                    <h1 class="display-1 text-white custom-animated-text position-absolute top-50 start-50 translate-middle">Aston</h1>
                                </div>
                            </li>
                            <li id="slide4">
                                <div>
                                    <img src="../assets/img/photos/img4.webp" alt="..." loading="lazy" class="w-100">
                                    <h1 class="display-1 text-white custom-animated-text position-absolute top-50 start-50 translate-middle">Mountain</h1>
                                </div>
                            </li>
                            <li id="slide5">
                                <div>
                                    <img src="../assets/img/photos/img1.webp" alt="..." loading="lazy" class="w-100">
                                    <h1 class="display-1 text-white custom-animated-text position-absolute top-50 start-50 translate-middle">Car</h1>
                                </div>
                            </li>
                        </ul>

                        <button type="button" class="slider-nav" aria-label="Go to previous"></button>
                        <button type="button" class="slider-nav slider-nav-next" aria-label="Go to next"></button>

                        <div class="slider-indicators">
                            <button aria-label="Go to slide" class="active"></button>
                            <button aria-label="Go to slide"></button>
                            <button aria-label="Go to slide"></button>
                            <button aria-label="Go to slide"></button>
                            <button aria-label="Go to slide"></button>
                        </div>

                        <style>
                            /*The starting point of text to animate*/

                            #animatedText.slider-nav-animation .slider-container .custom-animated-text {
                                opacity: 0.25;
                                transform: scale(.25);
                                transition: opacity 1.5s ease-in-out, transform .95s ease-in-out;
                                transition-delay: .5s;
                                text-align: center;
                            }
                            /*The end of animation*/

                            #animatedText.slider-nav-animation .slider-container .slide-visible .custom-animated-text {
                                opacity: 1;
                                transform: none;
                            }
                        </style>
                    </div>

[nicped]

I added the example in the bottom of the examples page: https://swiffyslider.com/examples/

[masstechnologist]

Perfect. That worked like a charm!