What is gsap(greensock)​​?

Introduction: :

Getting started with Gsap Js In 15 min

Greensock is the best javascript library out in the market for creating stunning animation. It can be used to create complex animation without any hazzle .

Their are built-in methods for creating greensock animation , you just have to specify that methods . Gsap could also be used to create animation through Svg. Check out this complete post on Svg animation .

Cdn link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

What is tweenmax?


TweenMax instance handles tweening one or more properties of any object (or array of objects) over time.

TweenMax can be used on its own or in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler.

Usage example:

var photo = document.getElementById("photo");
TweenMax.to(photo, 2, {width:"200px", height:"150px"});

You can also use a TweenMax.from() tween if you want to define the starting values instead of the ending values so that the target tweens from the defined values to wherever they currently are.

Or a TweenMax.fromTo() lets you define both starting and ending values.

Although the to(), from(), and fromTo() static methods are popular because they’re quick and can avoid some garbage collection hassles, you can also use the more object-oriented syntax like this:

var tween = new TweenMax(myObject, 2, {width:200, height:150});

Greensock (Tweenmax properties):

Getting started with Gsap Js In 15 min ? 1 » Csspoint101

For more properties and detailed explanation: visit

Easing methods in Greensock library :


  • bounce method:

Bounce is a convenience class that congregates the 3 types of Bounce eases (BounceIn, BounceOut, and BounceInOut) as static properties

so that they can be referenced using the standard synatax, like Bounce.easeIn, Bounce.easeOut and Bounce.easeInOut.

TweenMax.to( graph, 2.5, {
ease:
Bounce. easeOut,
y: -500
});
Getting started with Gsap Js In 15 min ? 2 » Csspoint101

  • Power method:

Provides an easeIn, easeOut, and easeInOut with power (or strength) of 1 which is identical to Quad but with a more intuitive name. The more power, the more exaggerated the easing effect.

Using a numeric approach like this in the name makes experimenting easier. This is one of the eases that is natively accelerated in TweenLite and TweenMax.

TweenMax.to(obj, 1,{ x:100,  ease:Power1.easeOut });

Getting started with Gsap Js In 15 min ? 3 » Csspoint101

For more easing properties and detailed explanation: visit


Gsap tutorial​ (​project):


Getting started with Gsap Js In 15 min ? 4 » Csspoint101

Code :


Javascript:

<script type="text/javascript">
TweenMax.from(".left-text", 2.5, {
    delay: 0.4,
    opacity: 0,
    top: "-110%",
    ease: Elastic.easeInOut
});

TweenMax.from(".logo", 2, {
    delay: 0.3,
    opacity: 0,
    left: "-10%",
    ease: Power2.easeInOut
});

TweenMax.from(".main-text", 1, {
    delay: 0.7,
    y: "-300",
    opacity: 0,
    ease: Power2.easeInOut
});

TweenMax.from(".line", 2.8, {
    delay: 0.8,
    opacity: 0,
    ease: Expo.easeInOut
});

TweenMax.from(".social", 2.2, {
    delay: 0.5,
    opacity: 0,
    ease: Expo.easeInOut
});

TweenMax.from(".btn-1", 2.7, {
    delay: 0.3,
    opacity: 0,
    x: "300",
    ease: Expo.easeInOut
});

TweenMax.from(".img-1", 2, {
    delay: 0.8,
    opacity: 0,
    x: "-300",
    ease: Power2.easeInOut
});
</script>

Html :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Gsap animation</title>
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <script src="./script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>
<section class="sec-one">
    <!-- NAVIGATION -->
    <nav class="navbar">
        <div class="logo">
            <a href="#">Clothe<span class="wheat">.io</span></a>
        </div>
        <div class="social">
            <ul>
                <li>
                    <a href="#">
                        <ion-icon name="logo-instagram"></ion-icon>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="logo-facebook"></ion-icon>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="logo-youtube"></ion-icon>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="logo-twitter"></ion-icon>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- END NAVIGATION -->
    <!-- CENTER CONTENT -->
    <!-- content left -->
    <div class="content-left">
        <div class="img img-1">
            <img src="./img/image2.jpg" alt="fuckOff" srcset="" />
        </div>
        <div class="left-text">
            <h2>
                Minimal wardrobe <br />collection for <br />
                everyone.
            </h2>
        </div>
    </div>
    <!-- content right -->
    <div class="content-right">
        <div class="white"></div>
        <div class="line"></div>
        <div class="main-text">
            <h1>
                discover your authentic style <br />
                and be the tunning lady <br />
                you naturally are.
            </h1>
        </div>
        <button class="btn-1 btn">
            SHOP NOW
        </button>
    </div>
    <!-- END CENTER CONTENT -->
</section>
<!-- SECTION TWO MARKUP -->
<section class="sec-two">
    <!-- content-left -->
    <div class="left-content">
        <div class="img">
            <img src="./img/image3.jpg" alt="" />
        </div>
    </div>
    <!-- content-right -->
    <div class="right-content">
        <h1>
            It's about way more <br />
            than just a pretty outfit.
        </h1>
        <div class="line"></div>
        <button class="btn-2 btn">
            SHOW MORE
        </button>
        <h2>
            We makes shopping for work ,wear, weekend and <br />
            outfits, party dresses, and formal clothes a perfectly <br />
            positive experience, and once you have your ingenious <br />
            ensemble pieced together, we invite you to share your <br />
            outfit ideas with our community of independent women.
        </h2>
    </div>
</section>
<!-- SECTION TWO MARKUP ENDS -->

</body>

</html>

Css :


/* global styling */
* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

a {
    color: rgb(37, 37, 36);
}

ion-icon {
    height: 20px;
    width: 30px;
    color: rgb(37, 37, 36);
}

.line {
    width: 150px;
    border: 1px solid black;
}

.btn {
    border: none;
    padding: 20px 50px;
    background-color: black;
    color: white;
    font-family: "Montserrat";
    cursor: pointer;
}

img {
    width: 280px;
    height: 340px;
    object-fit: cover;
}

h2 {
    font-family: "Josefin Sans";
    opacity: 0.7;
}

h1 {
    opacity: 0.7;
    line-height: 50px;
    font-family: "Josefin Sans";
    font-size: 2rem;
}

.wheat {
    color: rgb(245, 181, 62);
}

/* section one styling */
/* navbar */
.navbar {
    margin: 100px 50px;
    background: grey;
}

.logo {
    position: absolute;
    top: 6%;
    left: 54px;
    font-family: "Indie Flower";
    font-size: 1.7rem;
    color: rgb(29, 27, 27);
    opacity: 0.8;
    letter-spacing: 2px;
}

.social ul {
    display: flex;
    position: absolute;
    right: 150px;
    z-index: 2;
}

.social ul li {
    margin: -50px 20px;
}

/* center styling */

.sec-one {
    background-color: wheat;
    height: 85vh;
}

.sec-one .img {
    position: absolute;
    top: 45%;
    left: 20%;
    z-index: 2;
}

.sec-one .white {
    position: absolute;
    width: 350px;
    height: 440px;
    background-color: rgba(255, 255, 255, 0.815);
    z-index: 1;
    left: 38%;
}

.left-text {
    position: absolute;
    left: 15%;
    top: 25%;
}

.sec-one .line {
    position: absolute;
    top: 35%;
    left: 32%;
    z-index: 2;
}

.main-text {
    position: absolute;
    top: 25%;
    left: 45%;
    z-index: 2;
}

.btn-1 {
    position: absolute;
    top: 55%;
    right: 30%;
    z-index: 2;
}

/* section two styling */
.sec-two {
    position: relative;
    margin: 20px 20px;
    height: 80vh;
}

.sec-two img {
    position: absolute;
    height: 80vh;
    width: 45%;
    z-index: -1;
    opacity: 0.9;
}

.right-content h1 {
    position: absolute;
    top: 5%;
    left: 50%;
    font-size: 2.8rem;
    opacity: 0.8;
}

.right-content .line {
    position: absolute;
    left: 36%;
    top: 55%;
    width: 300px;
    transform: rotateZ(90deg);
}

.btn-2 {
    position: absolute;
    top: 80%;
    left: 50%;
}

.right-content h2 {
    position: absolute;
    top: 40%;
    left: 50%;
    line-height: 30px;
    font-size: 1.2rem;
}

For more Greensock animations ​ : visit


Conclusion:

Greensock is very useful library for adding animation in your website. It has got different properties and built-in methods which can be used any time needed. Further greensock animations are very fast and clean. Try out today gsap in your latest project to add some extra toppings and stand out your website from others. I would like to end this blog post by asking you – Which animation library you use and is Gsap library worth using?