TA-YouTube - Animations

TA-YouTube comes with a some great animations for your background image. Learn how to use these animations or design your own.

To right

Video Player

To change the animation to toright just change the class name of your background image to ta-youtube-anim-toright.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-toright"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

To left

Video Player

To change the animation to toleft just change the class name of your background image to ta-youtube-anim-toleft.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-toleft"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Rotate

Video Player

To change the animation to rotate just change the class name of your background image to ta-youtube-anim-rotate.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-rotate"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Ken Burns effect

Video Player

To change the animation to kenburns just change the class name of your background image to ta-youtube-anim-kenburns.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-kenburns"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Flight

Video Player

To change the animation to flight just change the class name of your background image to ta-youtube-anim-flight.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-flight"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>

Add you own animation to TA-YouTube

To create your own animation you have to add your own css class e.g. .ta-youtube-anim-example. In this class you can define animation params exactly for your new animation like the name of your new keyframe animation or transform-origin. In the next step you have to define your own keyframes -> 🌮

.ta-youtube-anim-example {
    animation-name: youtube-keyframes-example;
    transform-origin: right center;
}
@keyframes youtube-keyframes-example {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

Done with your new animation you have to add the new class e.g. ta-youtube-anim-example to your background image.

<img
    class="ta-youtube-background ta-youtube-anim ta-youtube-anim-example"
    src="https://picsum.photos/id/10/1400/700"
    alt="Background Image"
    title="Background Image"
/>
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