Fork me on GitHub

How to use cssanimation.io's GSAP version

This library is not only built for CSS, it supports Greensock as well. Greensock is the standard JavaScript Animation framework in the world. It can help you to animate your HTML elements.

This is absolutely easy to have your HTML elements animated by our Greensock version. After include all the files just add your desired class name.
So why worried? [ Download ] ‍and let’s get started with this library.

please follow the instruction below

First, you download or grab the CDN URL of TweenMax.js plugin from [ GreenSock ] and download cssanimation.io's GSAP script cssanimation-gsap.js from [ cssanimation.io ]

1. Now include the TweenMax.min.js and cssanimation-gsap.js before the body tag like below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</body>
</html>

2. Now add the class cssanimation and class of animation name like fadeIn for fade in animation to the element that you want to animate. [For list of animation class name check out the home page or check the codepen title red block section from below or click here ]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
</head>
<body>

<h1 class="cssanimation fadeIn"> Example </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</body>
</html>

3. And if you want letter animation, Just add a letter animation class like leFadeIn for fade in animation. And now gsap version support only sequential animation. But no worries about random animation, We are working on it. Very soon you'll get the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Library for Developers and Ninjas</title>
</head>
<body>

<h1 class="cssanimation leFadeIn"> Example </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script type="text/javascript" src="cssanimation-gsap.js"></script>
</body>
</html>

It's that easy! 😀

Every animation live from the codepen

Here as you can see how you can work and modify each animation from the CODEPEN You can also download them in a ZIP file by clicking the download button.

loading spin icon

Extremely light weight

Unlike all the other complicated vendors, our cssanimation-gsap.js is only 44kb with 224 animations, 33kb in the minified version and only 5kb when compressed.

Extremely light weight!!! We know, Believe it!!!

Having trouble?

If cssanimation.io isn't doing what you expect it to please post a mail to [email protected] or create a issue on Github

License

cssanimation.io is licensed under the MIT Licenses

×
Download Full Library Download From GitHub
Close This Panel

Letter animation class name

Block animation class name