PSD to HTML Landing Page Animation with Greensock

PSD to HTML Landing Page Animation with Greensock

HTML

<section class="header py-5">
  <nav class="navbar navbar-light header-navigation fixed-top">
    <div class="container">
      <a class="navbar-brand header-brand" href="#">esens</a>
      <div class="wrapper">
        <a href="#" class="nav-link">LOG IN</a>
        <a href="#" class="btn btn-border bdr-secondary">TRY FOR FREE</a>
      </div>
    </div>
  </nav>
  <div class="container py-5 main-container">
    <div class="row">
      <div class="col-md-6 order-2 order-lg-1 order-xl-1">
        <div class="sub-wrapper">
          <div>
            <div class="text-wrapper">
              <div class="text-inner">
                <h1 class="lead-heading">Big Ideas</h1>
                <h6 class="lead-sub-heading">in small Packages</h6>
              </div>
            </div>
          </div>
          <div class="my-4">
            <div class="text-wrapper">
              <div class="text-inner">
                <p class="lead-description">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
                  nostrum sed deserunt quos corrupti ipsum exercitationem
                  consectetur explicabo corporis eveniet,
                </p>
              </div>
            </div>
          </div>
          <div>
            <div class="text-wrapper">
              <div class="text-inner">
                <button class="btn large-btn btn-black tryFree">
                  TRY FOR FREE
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 order-1 order-lg-2 order-xl-2">
        <div class="img-container">
          <img src="image.png" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ************************* info section -->
<section class="info">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="img-container">
          <img src="image.png" />
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <h3>Only 15 minutes</h3>
            </div>
          </div>
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Incidunt eligendi ipsum tenetur!
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="img-container">
          <img src="image.png" />
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <h3>Non-fiction bestsellers</h3>
            </div>
          </div>
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Incidunt eligendi ipsum tenetur!
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="img-container">
          <img src="image.png" />
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <h3>Even Offline</h3>
            </div>
          </div>
        </div>
        <div class="block-info">
          <div class="text-wrapper">
            <div class="text-inner">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Incidunt eligendi ipsum tenetur!
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ************************ gallery -->

<section class="gallery">
  <div class="revealer"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 px-0">
        <div class="img-container">
          <img src="image.png" class="img-fluid" />
          <div class="img-revealer"></div>
        </div>
      </div>
      <div class="col-md-3 px-0">
        <div class="img-container">
          <img src="image.png" class="img-fluid" />
          <div class="img-revealer"></div>
        </div>
      </div>
      <div class="col-md-3 px-0">
        <div class="img-container">
          <img src="image.png" class="img-fluid" />
          <div class="img-revealer"></div>
        </div>
      </div>
      <div class="col-md-3 px-0">
        <div class="img-container">
          <img src="image.png" class="img-fluid" />
          <div class="img-revealer"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ************************************* library -->

<section class="library">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="text-center">
          <div class="text-wrapper">
            <div class="text-inner">
              <h4 class="title">Our Library</h4>
            </div>
          </div>
          <div>
            <div class="text-wrapper w-50 my-2">
              <div class="text-inner">
                <p class="sub-title">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
                  maxime quasi at hic enim,
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="col-md-2">
        <div class="book">
          <div class="img-container">
            <img src="image.png" class="img-fluid" />
          </div>
          <div class="book-info">
            <div class="book-title">A World Of Infinity Lorem Ipsum</div>
            <div class="book-author">John Doe</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="text-center">
          <button class="btn large-btn btn-black tryFree my-5 mx-auto">
            TRY FOR FREE
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,800&display=swap");
:root {
  --fontFamily: "Open Sans", sans-serif;
  --secondary: #202428;
  --secondaryHover: #4d4d4d;
  --primary: #ffce04;
  --secondaryTextColor: #62686e;
  --white: #ffffff;
}

body {
  font-family: var(--fontFamily);
}

/*global styles*/

.btn {
  padding: 4px 20px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  outline: 0;
}

.btn-border {
  border: 1px solid;
  box-sizing: border-box;
}
.bdr-secondary {
  border-color: var(--secondary);
}
.btn-black {
  background-color: var(--secondary);
  color: var(--white);
}
.btn-black:hover {
  color: var(--white);
  background-color: var(--secondaryHover);
}

.large-btn {
  font-size: 14px;
  padding: 15px 30px;
}
/* Header styles */
.header {
  background-color: var(--primary);
  position: relative;
}
.header .header-brand {
  font-size: 40px;
  font-weight: 800;
}

.header .header-navigation .wrapper {
  display: flex;
}

.header .header-navigation .wrapper a {
  font-weight: 600;
  font-size: 14px;
  color: var(--secondary);
}

.text-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.text-wrapper .text-inner {
  position: relative;
}
/*main container*/
.main-container .img-container,
.main-container .sub-wrapper {
  min-height: 700px;
  padding-top: 50px;
}
.main-container .img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-container .sub-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main-container .lead-heading {
  font-weight: 900;
  font-size: 80px;
}
.main-container .lead-sub-heading {
  font-size: 50px;
  font-weight: 700;
}
.main-container .tryFree {
  font-weight: 600;
}

/*info section*/

.info {
  padding-top: 100px;
  padding-bottom: 100px;
}
.info .block-info,
.info .img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.info h3 {
  font-weight: 800;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.info p {
  text-align: center;
  font-weight: 600;
  color: var(--secondaryTextColor);
}

/*galery*/

.gallery {
  position: relative;
  overflow: hidden;
}

.gallery .revealer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: var(--primary);
}

.gallery .img-container {
  overflow: hidden;
  position: relative;
}

.gallery .img-container .img-revealer {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(#ffce04,0.5);
  top: 0;
  left: 0;
  z-index: 2;
}
/*library*/
.library {
  padding-top: 50px;
  padding-bottom: 50px;
}
.library .title {
  font-size: 46px;
  font-weight: 800;
}
.library .sub-title {
  font-weight: 600;
  color: var(--secondaryTextColor);
}

.library .book {
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.library .book .img-container img {
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

.library .book .book-info {
  margin: 10px;
  width: 100%;
}
.library .book .book-info .book-title {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.library .book .book-info .book-author {
  font-weight: 600;
  color: var(--secondaryTextColor);
}

Javascript

$(document).ready(function() {
  var controller = new ScrollMagic.Controller();
  var TL = new TimelineMax({ paused: true });
  var infoTimeLine = new TimelineMax({ paused: true });
  var galleryTimeLine = new TimelineMax({ paused: true });
  var libraryTimeLine = new TimelineMax({ paused: true });

  /*header vars*/
  var header = $(".header");
  var navigation = $(".header-navigation");
  var mainContainer = $(".main-container");
  var textInner = $(mainContainer).find(".text-wrapper .text-inner");
  var imgContainer = $(mainContainer).find(".img-container");

  /*info vars*/

  var info = $(".info");
  var infoImageContainer = $(info).find(".img-container");
  var infoTextInner = $(info).find(".text-inner");

  /*gallery vars*/

  var gallery = $(".gallery");
  var galleryRevealer = $(gallery).find(".revealer");
  var galleryImageRevealer = $(gallery).find(".img-revealer");

  /*library vars*/

  var library = $(".library");
  var libTextInner = $(library).find(".text-inner");
  var book = $(library).find(".book");

  var animationSpeed = 0.75;
  var animationTimingIn = Expo.easeIn;
  var animationTimingOut = Expo.easeOut;

  TL.fromTo(
    header,
    animationSpeed,
    { y: 1500, opacity: 0, ease: animationTimingIn },
    { y: 0, opacity: 1, ease: animationTimingOut }
  )
    .fromTo(
      navigation,
      animationSpeed,
      { y: "-100%", opacity: 0, ease: animationTimingIn },
      { y: "0%", opacity: 1, ease: animationTimingOut },
      "-=0.25"
    )
    .staggerFromTo(
      textInner,
      animationSpeed,
      { y: "120%", ease: animationTimingIn },
      { y: "0%", ease: animationTimingOut },
      0.15
    )
    .fromTo(
      imgContainer,
      animationSpeed,
      { y: -50, opacity: 0, ease: animationTimingIn },
      { y: 0, opacity: 1, ease: animationTimingOut },
      "-=1"
    );

  TL.play();

  /********************************** */

  infoTimeLine
    .fromTo(
      info,
      animationSpeed,
      { y: 100, ease: animationTimingIn, opacity: 0 },
      { y: 0, opacity: 1, ease: animationTimingOut }
    )
    .staggerFromTo(
      infoTextInner,
      animationSpeed,
      { y: 50, opacity: 0, ease: animationTimingIn },
      { y: 0, opacity: 1, ease: animationTimingOut },
      0.05
    );
  /*info scene*/
  new ScrollMagic.Scene({
    triggerElement: ".info",
    triggerHook: 0.65
  })
    .setTween(infoTimeLine)
    .setPin(true)
    .reverse(false)
    // .addIndicators()
    .addTo(controller);

  /************************************************* */

  galleryTimeLine
    .fromTo(
      gallery,
      animationSpeed,
      { x: "-100%", ease: animationTimingIn },
      { x: "0%", ease: animationTimingOut }
    )
    .fromTo(
      galleryRevealer,
      animationSpeed * 0.75,
      { x: "0%", ease: animationTimingIn },
      { x: "100%", ease: animationTimingOut }
    )
    .fromTo(
      galleryImageRevealer,
      animationSpeed,
      { x: "-100%", ease: animationTimingIn },
      { x: "100%", ease: animationTimingOut },
      "-=.58"
    );

  /*gallery scene*/
  new ScrollMagic.Scene({
    triggerElement: ".gallery",
    triggerHook: 0.85
  })
    .setTween(galleryTimeLine)
    .setPin(true)
    .reverse(true)
    // .addIndicators()
    .addTo(controller);

  /******************************** */
  libraryTimeLine
    .fromTo(
      libTextInner,
      animationSpeed,
      { y: 150, opacity: 1, ease: animationTimingIn },
      { y: 0, opacity: 1, ease: animationTimingOut }
    )
    .staggerFromTo(
      book,
      animationSpeed + 2,
      { opacity: 0, y: 10, ease: animationTimingIn },
      { opacity: 1, y: 0, ease: animationTimingOut },
      0.05
    );

  new ScrollMagic.Scene({
    triggerElement: ".library",
    triggerHook: 0.6
  })
    .setTween(libraryTimeLine)
    // .addIndicators()
    .setPin(true)
    .reverse(false)
    .addTo(controller);
});

 

Add a Comment

Your email address will not be published. Required fields are marked *