UI Development
GSAP layout Home page
Getting Started with GSAP
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.
CDN
The simplest way to load GSAP is from the CDN with a <script> tag. TweenMax (and all publicly available GSAP files) are hosted on Cloudfare’s super-fast and reliable cdnjs.com.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
Thanks to GSAP : https://greensock.com/
CSS link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Script link
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
HTML code :
<section class="one">
<div class="row">
<div class="container">
<div class="right-layer"></div>
<header>
<div class="logo">
<h4>Material Design</h4>
</div>
<div class="menu">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About Me</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</header>
</div>
<div class="container-fluid body1">
<div class="col-md-12 front">
<div class="col-md-3 img">
<img src="img/flower.png" class="plant">
</div>
<div class="col-md-7 title">
<div class="title1">
<h1 class="h11">story<span>.</span></h1>
<hr class="hr1"/>
<p class="p1">With the help of GSAP tool it was made by satz</p>
</div>
<div class="title2">
<h1 class="h12">hi</h1>
</div>
</div>
<div class="col-md-1 num">
<p class="onep">01</p>
<div class="line"></div>
<p class="nthp">03</p>
</div>
</div>
</div>
</div>
</section>
It contains some basic elements in this demo, the animation of GSAP is implemented by below cdn link
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
and the CSS is given only for this animation, its not a responsive design.
CSS code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: sans-serif;
background: rgb(134, 134, 134);
width: 100%;
height: 100%;
overflow: hidden;
}
.right-layer {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100vh;
background: #333;
clip-path: polygon(30% 12%, 30% 0, 100% 0, 100% 100%, 0% 100%, 0% 88%, 94% 88%, 94% 12%);
z-index: 1;
}
header {
margin-top: 11%;
}
header .logo {
position: relative;
float: left;
}
.logo h4 {
font-weight: 700;
}
header .menu {
position: relative;
float: right;
}
header .menu ul {
list-style: none;
}
header .menu ul li {
text-decoration: none;
float: left;
padding: 5px 20px;
}
header .menu ul li a {
font-weight: 600;
color: #333;
text-transform: uppercase;
font-size: 0.8em;
}
/* Body - 01 */
.body1 {
width: 100%;
height: 68vh;
position: absolute;
}
.body1 .front {
margin: 0 8%;
}
.body1 .img img {
width: 114%;
z-index: 0;
}
.body1 .title {
margin: 6% 0;
}
.body1 .title h1 {
font-size: 13em;
letter-spacing: 13px;
font-family: roboto;
text-transform: uppercase;
}
.body1 .title .title1 {
position: absolute;
}
.body1 .title2 h1 {
opacity:none;
transform: translateX(-187px);
}
.body1 .title h1 span {
color: chocolate;
}
.body1 .title hr {
width: 15%;
height: 3px;
background: #333;
border: none;
}
.body1 .title p {
font-family: sans-serif;
}
.body1 .num {
position: relative;
display: block;
margin: 10% 0;
}
.body1 .num .line {
transform: rotate(90deg);
position: relative;
right: 41%;
margin-top: 50px;
height: 1px;
background: #d2691e;
}
.body1 .num p {
font-weight: 700;
}
.body1 .num p.nthp {
margin-top: 50px;
}
and finally the GSAP code was given below,
var home = document.querySelector('.home');
var about = document.querySelector('.about');
var img = document.querySelector('.img');
var h11 = document.querySelector('.h11');
var h12 = document.querySelector('.h12');
var hr1 = document.querySelector('.hr1');
var p1 = document.querySelector('.p1');
var num = document.querySelector('.num');
var plant = document.querySelector('.plant');
var title = document.querySelector('.title');
var a1 = document.querySelector('.a1');
var info = document.querySelector('.info');
const anim = new TimelineLite({paused: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 })
about.addEventListener('click', () => {
if(anim.isActive()) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
toggleTween(anim);
})
function toggleTween(tween) {
tween.reversed() ? tween.play() : tween.reverse();
}
the process of GSAP animation will be detailed in next blog.. to be continue..
