GSAP Animation

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<div class="container">
  <div class="item active">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
</div>


<button class="next">Next</button>
<button class="prev">Prev</button>

CSS

.item:not(:first-child) {
  display: none;
}

JavaScript

var tl = new TimelineLite();

function showWrap() {
	var curr = $(".item.active");
	curr.hide().removeClass("active");
  curr.next(".item").addClass("active");
}

$(".next").click(function() {
  var curr = $(".item.active");
  var currNext = $(".item.active").next(".item");
  tl.to(curr, 2, {
    autoAlpha: 0,
    x: -500,
    onComplete: showWrap
  })
  tl.to(currNext, 2, { autoAlpha: 1, x: 0, onComplete: showWrap 	}) .from(curr, 2, { autoAlpha: 0, x: 500, })
})


/* var wrap = $(".wrap"),
  logo = $(".logo"),
  tl = new TimelineLite();

var showWrap = () => {
  $(".wrap").css("display", "flex");
  $(".logo").css("display", "none")
}

tl
  .to(logo, 2, {
    autoAlpha: 0,
    onComplete: showWrap
  })
  .from(wrap, 2, {
    x: -500,
    autoAlpha: 1
  }) */