TA-Gallery - Transitions

TA-Gallery comes with some great slide transitions out of the box. Get more details about how to use these transitions or - if you want to - design your own animations.

Swing

To change the animation to swing just add ta-gallery-anim-swing to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-swing">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>
You can use a different animation for every slide.

Slide

To change the animation to slide just add ta-gallery-anim-slide to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-slide">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Swipe

To change the animation to swipe just add ta-gallery-anim-swipe to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-swipe">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Rotate

To change the animation to rotate just add ta-gallery-anim-rotate to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-rotate">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Snake

To change the animation to snake just add ta-gallery-anim-snake to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-snake">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Window

To change the animation to window just add ta-gallery-anim-window to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-window">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Scroll

To change the animation to scroll just add ta-gallery-anim-scroll to the slide next to ta-gallery-element.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-scroll">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Fade

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element ta-gallery-anim-fade">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Add you own slide effects

To create your own animation you have to add your own css class e.g. .ta-youtube-anim-example to your CSS file. TA-Gallery uses four keyframe animations for “left in”, “left out”, “right in” and “right out”. Every animation is based on a keyframe animation and to define your own you have to add your own keyframe animation for every situation. The names of the animations are defined by CSS custom properties (CSS variables). The naming convention is totally up to you. If your animation needs changing the transformation origin you can even define it inside your animation class - again by setting the CSS custom property.

Defined this way TA-Gallery will use your own animations for slide effects if you add your new class to ta-gallery-element -> 🌮

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div class="ta-gallery-element your-own-animation">
        <figure>
            <img src="image.jpg" alt="Flowers in Taipei" class="ta-gallery-image" />
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD MORE SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>
.your-own-animation {
	--ta-gallery-anim-right-in: your-own-animation-right-in;
	--ta-gallery-anim-right-out: your-own-animation-right-out;
	--ta-gallery-anim-left-in: your-own-animation-left-in;
	--ta-gallery-anim-left-out: your-own-animation-left-out;
	--ta-gallery-origin-right-in: right center;
	--ta-gallery-origin-right-out: left center;
	--ta-gallery-origin-left-in: left center;
	--ta-gallery-origin-left-out: right center;
}

@keyframes your-own-animation-right-in {
    from: {
        opacity: 0;
        transform: translateX(20vw);
    }
    to: {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes your-own-animation-right-out {
    from: {
        opacity: 1;
        transform: translateX(0);
    }
    to: {
        opacity: 0;
        transform: translateX(-20vw);
    }
}

@keyframes your-own-animation-left-in {
    from: {
        opacity: 0;
        transform: translateX(-20vw);
    }
    to: {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes your-own-animation-left-out {
    from: {
        opacity: 1;
        transform: translateX(0);
    }
    to: {
        opacity: 0;
        transform: translateX(20vw);
    }
}
arrow-leftPrevious Functions Next Accessibility arrow-right
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

Plugins & News

Release Notes TA-Analytics TA-Foodtrucks TA-Pagination TA-YouTube TA-Gallery

Getting started

Behind the curtain Browser Support Error TA Helper Plugins The Basic Concept

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy