GSAP Inner page

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See “Why GSAP?”.

You need to impress the client with eye-catching animations that perform well on every device, or maybe you’re building a sophisticated UI that calls for buttery-smooth draggable elements that flick and glide naturally to precise locations you define. You’re not looking for a simplistic jQuery plugin that was slapped together in someone’s free time – you need professional-grade, reliable tools.

Thanks to GSAP : https://greensock.com/

This is the animation i have tried for the inner page showing product with the details when i click the image, i have done for the both product images, When i click that image it slitly move to the left side and increased the image size to the fit then the right side we get the product details smoothly. We get this animation for both the product images.

HTML code :

<div class="container">
    <div class="col-md-offset-2 col-md-5 col1">
        <h2 class="a1">This is about page ready to rock</h2>
        <div class="col-md-12 p0 info">
            <div class="face"></div>
            <h4>by plant lover sathish kumar</h4>
        </div>
        <div class="col-md-12 detail p0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="col-md-12 p0 base">
            <div class="col-md-6 base1 p0">
                <h3>What is your name?</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
            </div>
            <div class="col-md-6 base2 p0">
                <h3>May you know me?</h3>
                <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>

        <div class="col-md-4 col-md-offset-1 col2">
            <div class="img1">
                <img src="img/img1.jpg" alt="" class="img1img">
                <h2 class="img1h">Hungry sea anemones</h2>
                <p class="img1p">You might have played the game called “animal, vegetable, mineral”. One player thinks of an object or organism and the other players ask questions to try to guess what it is – starting with this simple classification. But nature isn’t this simple. There are dozens of groups of living species that are neither plants nor animals. <br>
                We tend to think of plants as organisms that stand still and use photosynthesis to produce energy from sunlight and make their own organic molecules from the soil. And we see animals as creatures that move and feed on other organisms to obtain the energy and molecules they need.</p>
            </div>
            <div class="img2">
                <img src="img/img2.jpg" alt="" class="img2img">
                <h2 class="img2h">Amazing water fall</h2>
                <p class="img2p">Sea anemones are technically animals, but they look so much like plants that they are named after a group of flowers. Even Aristotle, the ancient Greek who produced one of the world’s first systems for categorising life, was puzzled by them. He classified anemones as “zoophytes”, organisms bearing traits of both groups. <br>
                The truth is that they are animals because they can (very slowly) move and feed on other unsuspecting organisms that get trapped in their tentacles. In fact, sea anemones belong to a group of animals called cnidarians, which also includes jellyfish. Interestingly, there are even components of their nervous system that are the same as humans’, although their anatomy is very different.</p>
            </div>
        </div>

</div>

CSS code :

.col1 {
    height: 67vh;
}
.col1 h2 {
    font-size: 3.2em;
    font-weight: 700;
    font-family: sans-serif;
}
.info {
    margin: 10px 0;
}
.col1 .face {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: #d2691e;
    float: left;
    margin-right: 10px; 
}
    .col1 h4 {
        color: rgb(126, 126, 126);
        position: relative;
        bottom: 5px;
    }
.p0 { padding: 0 !important; }
.detail p {
    font-size: small;
    font-family: sans-serif;
}
.base {
    position: absolute !important;
    bottom: 0;
}
.base1 h3, .base2 h3 {
    font-size: 1em;
    font-weight: 700;
    color: chocolate;
}
.base1, .base2 {
    padding: 5px;
}
.col2 img {
    width: 100%;
    margin-top: 20px;
}
.img1 img, .img2 img {
    cursor: pointer;
}

.img1h, .img2h {
    position: absolute;
    top: 0;
    opacity: 0;
}
.img1p, .img2p {
    position: absolute;
    font-size: 1.2em;
    top: 70px;
    text-align: justify;
}
.img2p {
    opacity: 0;
}

JS Code :

var about = document.querySelector('.about');
var a1 = document.querySelector('.a1');
var info = document.querySelector('.info');
var col1 = document.querySelector('.col1');
var detail = document.querySelector('.detail');
var base1 = document.querySelector('.base1');   var base2 = document.querySelector('.base2');
var img1 = document.querySelector('.img1'); var img1img = document.querySelector('.img1img'); var img1p = document.querySelector('.img1p'); var img1h = document.querySelector('.img1h');
var img2 = document.querySelector('.img2'); var img2img = document.querySelector('.img2img'); var img2p = document.querySelector('.img2p'); var img2h = document.querySelector('.img2h');

const ind_page1 = new TimelineLite({paused:true, reversed:true});
const ind_page2 = new TimelineLite({pause:true, reversed:true});

anim.to(img, 1, { x: -300, ease:Power3.easeOut })
.to(plant, 1, { filter: "grayscale(100%)", ease: Power3.easeOut }, "-=1")
.fromTo(h12, 1, { y: 100, opacity: 0 }, { y:0, opacity: 1, ease:Power3.easeOut })
.fromTo(hr1, 2, { x:0, width: "15%", ease:Power3.easeOut }, { x:"-180px", width: "45%", ease:Power3.easeOut })
.to(p1, 2, { x: "-180px", ease:Power3.easeOut }, "-=1")
.to(num, 1, { x:100, opacity: 0 })

.to(title, 1, { opacity: 0 })
.fromTo(a1, 1, { y:-50, opacity:0 }, { y:0, opacity:1 })
.fromTo(info, 1, { y:-30, opacity:0 }, { y:0, opacity:1 }, "-=0.5")
.fromTo(detail, 1, { y:-15, opacity:0 }, { y:0, opacity:1 }, "-=0.2")
.fromTo(base1, 1, { y:-50, rotation: "10", opacity:0 }, { y:0, rotation: "0", opacity:1 }, "-=0.5")
.fromTo(base2, 1, { y:-70, rotation: "10", opacity:0 }, { y:0, rotation: "0", opacity:1 }, "-=1")
.fromTo(img1, 1, { x:70, opacity:0 }, { x:0, opacity:1 }, "-=2")
.fromTo(img2, 1, { x:70, opacity:0 }, { x:0, opacity:1 }, "-=1.5")

ind_page1.to(col1, 1, { opacity: 0 })
.to(img1img, 1, { x:-800, width: "200%" })
.to(img2img, 1, { opacity:0 }, "-=2")
.fromTo(img1h, 1, { y:100, opacity:0 }, { y:0, opacity:1 }, "-=1")
.fromTo(img1p, 1, { y:100, opacity:0 }, { y:0, opacity:1 })

ind_page2.to(col1, 1, { opacity: 0 })
.to(img2img, 1, { x:-800, y:-260, width: "200%" })
.to(img1img, 1, { opacity:0 }, "-=2")
.fromTo(img2h, 1, { y:100, opacity:0 }, { y:-260, opacity:1 }, "-=1")
.fromTo(img2p, 1, { y:100, opacity:0 }, { y:-260, opacity:1 })

about.addEventListener('click', () => {
     if(anim.isActive()) {
         e.preventDefault();
         e.stopImmediatePropagation();
         return false;
     }
     toggleTween(anim);
})

img1img.addEventListener('click', () => {
    if(ind_page1.isActive()) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
    toggleTween(ind_page1);
})

img2img.addEventListener('click', () => {
    if(ind_page2.isActive()) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
    toggleTween(ind_page2);
})

function toggleTween(tween) {
    tween.reversed() ? tween.play() : tween.reverse();
}

the process of full GSAP animation will be detailed in next blog..  to be continue..