TA-Pagination - Transitions

TA-Pagination 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 transitions.

Swing

To change the animation to swing just add ta-pagination-anim-swing to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-swing"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Spin

To change the animation to spin just add ta-pagination-anim-spin to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-spin"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Slide

To change the animation to slide just add ta-pagination-anim-slide to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-slide"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Fade

To change the animation to fade just add ta-pagination-anim-fade to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Swipe

To change the animation to swipe just add ta-pagination-anim-swipe to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-swipe"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Rotate

To change the animation to rotate just add ta-pagination-anim-rotate to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-rotate"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Snake

To change the animation to snake just add ta-pagination-anim-snake to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-snake"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Scroll

To change the animation to scroll just add ta-pagination-anim-scroll to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-scroll"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Window

To change the animation to window just add ta-pagination-anim-window to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-window"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Fold

To change the animation to fold just add ta-pagination-anim-fold to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-fold"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Scroll

To change the animation to scroll just add ta-pagination-anim-scroll to the base level - same as your ta-pagination class.

<div
    class="ta-pagination ta-pagination-anim-scroll"
    x-data="taPagination()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

Add you own transition

To create your own animation you have to add your own css class e.g. .ta-youtube-anim-example to your CSS file. TA-Pagination 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-Pagination will use your transition if you add your new class to the base level - same as your ta-pagination class. -> 🌮

<div
    class="ta-pagination your-own-transition"
    x-data="taPagination()"
    x-init="init()"
    data-class-animation="your-own-transition"
>
    <!-- CONTENT -->
</div>
.your-own-transition {
	--ta-pagination-anim-right-in: your-own-transition-right-in;
	--ta-pagination-anim-right-out: your-own-transition-right-out;
	--ta-pagination-anim-left-in: your-own-transition-left-in;
	--ta-pagination-anim-left-out: your-own-transition-left-out;
	--ta-pagination-origin-right-in: right center;
	--ta-pagination-origin-right-out: left center;
	--ta-pagination-origin-left-in: left center;
	--ta-pagination-origin-left-out: right center;
}

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

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

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

@keyframes your-own-transition-left-out {
    from: {
        opacity: 1;
        transform: translateX(0);
    }
    to: {
        opacity: 0;
        transform: translateX(20vw);
    }
}
arrow-leftPrevious Functions Next Tailwind CSS Plugin 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