Image Transition On Scroll(GSAP)

image-transition-on-scroll-gsap.markdown

Image Transition On Scroll(GSAP)

images from https://unsplash.com/ transition inspiration from http://www.weareuprising.com/work/4 Some minor transition bugs are still left! Note: My JS code isn't elegant. Not working on firefox though.

A Pen by Yugam on CodePen.

License.

index.html

  <div class="container">
      <div class="scroll-indicator"></div>
      <div class="scroll">scroll</div>
      <div class="close">
        <span class="lin1"></span>
        <span class="lin2"></span>
      </div>
      <div class="button-left"><span class="view">View</span></div>
      <div class="button-right"><span class="view">View</span></div>
      <div class="child-left-1">
        <div class="left1 left"></div>
        <div class="left2 left"></div>
        <div class="left3 left"></div>
        <div class="left4 left"></div>
        <div class="left5 left"></div>
      </div>
      <div class="child-right-1">
        <div class="right1 right"></div>
        <div class="right2 right"></div>
        <div class="right3 right"></div>
        <div class="right4 right"></div>
        <div class="right5 right"></div>
      </div>
      <div class="child-left-2">
        <div class="left1 left"></div>
        <div class="left2 left"></div>
        <div class="left3 left"></div>
        <div class="left4 left"></div>
        <div class="left5 left"></div>
      </div>
      <div class="child-right-2">
        <div class="right1 right"></div>
        <div class="right2 right"></div>
        <div class="right3 right"></div>
        <div class="right4 right"></div>
        <div class="right5 right"></div>
      </div>
      <div class="child-left-3">
        <div class="left1 left"></div>
        <div class="left2 left"></div>
        <div class="left3 left"></div>
        <div class="left4 left"></div>
        <div class="left5 left"></div>
      </div>
      <div class="child-right-3">
        <div class="right1 right"></div>
        <div class="right2 right"></div>
        <div class="right3 right"></div>
        <div class="right4 right"></div>
        <div class="right5 right"></div>
      </div>
      <div class="child-left-4">
        <div class="left1 left"></div>
        <div class="left2 left"></div>
        <div class="left3 left"></div>
        <div class="left4 left"></div>
        <div class="left5 left"></div>
      </div>
      <div class="child-right-4">
        <div class="right1 right"></div>
        <div class="right2 right"></div>
        <div class="right3 right"></div>
        <div class="right4 right"></div>
        <div class="right5 right"></div>
      </div>
    </div>

script.babel

//there qre still some transition bugs are left...
let curPage = 1;
let scrolling = true;
let viewscroll = false;
let hoverr = true;
let animationTime = 1;
let lbutton = false;
let tl = new TimelineMax({repeat: 0});
const left = $('.child-left-2>.left');
const right = $('.child-right-2>.right');
const scrollIn = $('.scroll-indicator');
const scrollIn2 = $('.scroll');
const close = $('.close');
const lb = $('.button-left');
const rb = $('.button-right');
for (let i = 2; i <= 4; i++) {
  for (let j = 1; j <= 5; j++) {
    tl.set($('.child-left-' + i + '>.left' + j), {x: '+=100%'});
    tl.set($('.child-right-' + i + '>.right' + j), {x: '-=100%'});
  }
}
tl.set(close, {
  scaleX: 0,
  transformOrigin: 'center'
});
function navigateDown() {
  if (scrolling && !viewscroll) {
    console.log('ww');
    scrolling = false;
    let tl = new TimelineMax({repeat: 0});
    for (let i = 1; i <= 5; i++) {
      if (i === 1 || i === 5) {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage + 1) + '>.left' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .3).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage + 1) + '>.right' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .3);
      } else if (i === 3) {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage + 1) + '>.left' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .15).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage + 1) + '>.right' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .15);
      } else {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage + 1) + '>.left' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .25).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage + 1) + '>.right' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .25);
      }
    }
    curPage++;
    if (curPage == 4) {
      scrollIn.addClass('opa');
      scrollIn2.addClass('opa');
    } else if (curPage != 4) {
      scrollIn.removeClass('opa');
      scrollIn2.removeClass('opa');
    }

    setTimeout(() => {
      scrolling = true
    }, 1300);
  }
}

function navigateUp() {
  if (scrolling && !viewscroll) {
    scrolling = false;
    let tl = new TimelineMax({repeat: 0});
    for (let i = 1; i <= 5; i++) {
      if (i === 1 || i === 5) {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage - 1) + '>.left' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .4).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage - 1) + '>.right' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .4);
      } else if (i === 3) {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage - 1) + '>.left' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .11).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage - 1) + '>.right' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .11);
      } else {
        tl.to([
          $('.child-left-' + curPage + '>.left' + i),
          $('.child-left-' + (curPage - 1) + '>.left' + i)
        ], animationTime, {
          x: '+=100%',
          ease: Power3.easeInOut
        }, .25).to([
          $('.child-right-' + curPage + '>.right' + i),
          $('.child-right-' + (curPage - 1) + '>.right' + i)
        ], animationTime, {
          x: '-=100%',
          ease: Power3.easeInOut
        }, .25);
      }
    }
    curPage--;
    if (curPage == 4) {
      scrollIn.addClass('opa');
      scrollIn2.addClass('opa');
    } else if (curPage != 4) {
      scrollIn.removeClass('opa');
      scrollIn2.removeClass('opa');
    }

    setTimeout(() => {
      scrolling = true
    }, 1300);
  }
}

$(document).on("keydown", function(e) {
  if (e.which === 38) {
    if (curPage === 1)
      return;
    navigateUp();
  } else if (e.which === 40) {
    if (curPage === 4)
      return;
    navigateDown();
  }
});

$(document).on("mousewheel DOMMouseScroll", function(e) {
  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
    if (curPage === 1)
      return;
    navigateUp();
  } else {
    if (curPage === 4)
      return;
    navigateDown();
  }
});

lb.mouseenter(function() {
  if (scrolling) {
    scrolling = false;
    let tl = new TimelineMax({repeat: 0});
    tl.to($('.child-left-' + curPage), 1, {
      className: '+=l1',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '+=r1',
      ease: Power4.easeOut
    }, 0);
    for (j = 0; j <= 5; j++) {
      tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
        className: '+=l1',
        ease: Power4.easeOut
      }, 0);
    }
  }

});
lb.mouseleave(function() {
  scrolling = true;
  let tl = new TimelineMax({repeat: 0});
  tl.to($('.child-left-' + curPage), 1, {
    className: '-=l1',
    ease: Power4.easeOut
  }, 0).to($('.child-right-' + curPage), 1, {
    className: '-=r1',
    ease: Power4.easeOut
  }, 0);
  for (let j = 0; j <= 5; j++) {
    tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
      className: '-=l1',
      ease: Power4.easeOut
    }, 0);
  }
});

rb.mouseenter(function() {
  if (scrolling) {
    scrolling = false;
    let tl = new TimelineMax({repeat: 0});
    tl.to($('.child-left-' + curPage), 1, {
      className: '+=l2',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '+=r2',
      ease: Power4.easeOut
    }, 0);
    for (let j = 0; j <= 5; j++) {
      tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
        className: '+=rr',
        ease: Power4.easeOut
      }, 0);
    }
  }

});
rb.mouseleave(function() {
  scrolling = true;
  let tl = new TimelineMax({repeat: 0});
  tl.to($('.child-left-' + curPage), 1, {
    className: '-=l2',
    ease: Power4.easeOut
  }, 0).to($('.child-right-' + curPage), 1, {
    className: '-=r2',
    ease: Power4.easeOut
  }, 0);
  for (let j = 0; j <= 5; j++) {
    tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
      className: '-=rr',
      ease: Power4.easeOut
    }, 0);
  }
});

lb.click(function() {
  if (!scrolling) {
    console.log(scrolling);
    viewscroll = true;
    let tl = new TimelineMax({repeat: 0});
    lbutton = true;
    tl.to(close, .5, {
      scaleX: 1,
      transformOrigin: 'center',
      autoAlpha: 1
    }, 0);
    tl.to($('.child-left-' + curPage), 1, {
      className: '+=cl1',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '+=cr1',
      ease: Power4.easeOut
    }, 0);
    for (j = 0; j <= 5; j++) {
      tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
        className: '+=cl1',
        ease: Power4.easeOut
      }, 0);
    }
    tl.to(lb, .4, {
      width: '0px'
    }, 0);
    tl.to(rb, .4, {
      width: '0px'
    }, 0);
    scrolling = false;
    if (curPage <= 3) {
      scrollIn.addClass('opa');
      scrollIn2.addClass('opa');
    }
  }
  setTimeout(() => {
    scrolling = false
    console.log(scrolling);
  }, 100);
});

rb.click(function() {
  if (!scrolling) {
    viewscroll = true;
    let tl = new TimelineMax({repeat: 0});
    tl.to(close, .5, {
      scaleX: 1,
      transformOrigin: 'center',
      ease: Power4.easeOut
    }, 0);
    tl.to($('.child-left-' + curPage), 1, {
      className: '+=cl2',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '+=cr2',
      ease: Power4.easeOut
    }, 0);
    for (j = 0; j <= 5; j++) {
      tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
        className: '+=crr',
        ease: Power4.easeOut
      }, 0);
    }
    tl.to(lb, .4, {
      width: '0px'
    }, 0);
    tl.to(rb, .4, {
      width: '0px'
    }, 0);
    scrolling = false;
    if (curPage <= 3) {
      scrollIn.addClass('opa');
      scrollIn2.addClass('opa');
    }
  }
  setTimeout(() => {
    scrolling = false
  }, 100);
});

close.click(function() {

  scrolling = true;
  viewscroll = false;
  if (curPage <= 3) {
    scrollIn.removeClass('opa');
    scrollIn2.removeClass('opa');
  }
  let tl = new TimelineMax({repeat: 0});
  if (lbutton) {
    tl.to(close, .5, {
      scaleX: 0,
      transformOrigin: 'center',
      ease: Power4.easeOut
    }, 0).to($('.child-left-' + curPage), 1, {
      className: '-=cl1',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '-=cr1',
      ease: Power4.easeOut
    }, 0)
    for (j = 0; j <= 5; j++) {
      tl.to($('.child-left-' + curPage + '>.left' + j), 1, {
        className: '-=cl1',
        ease: Power4.easeOut
      }, 0);
    };
    lbutton = false;
    tl.to(lb, .4, {
      width: '100px'
    }, 0).to(rb, .4, {
      width: '100px'
    }, 0);
  } else {
    tl.to(close, .5, {
      scaleX: 0,
      transformOrigin: 'center',
      ease: Power4.easeOut
    }, 0);
    tl.to($('.child-left-' + curPage), 1, {
      className: '-=cl2',
      ease: Power4.easeOut
    }, 0).to($('.child-right-' + curPage), 1, {
      className: '-=cr2',
      ease: Power4.easeOut
    }, 0);
    for (j = 0; j <= 5; j++) {
      tl.to($('.child-right-' + curPage + '>.right' + j), 1, {
        className: '-=crr',
        ease: Power4.easeOut
      }, 0);
    }
    tl.to(lb, .4, {
      width: '100px'
    }, 0).to(rb, .4, {
      width: '100px'
    }, 0);
  }

});


setTimeout(()=>{
	navigateDown();
},500)

scripts

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

style.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
}
@import url( 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400');

.container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
}

.child-left-1,
.child-left-2,
.child-left-3,
.child-left-4,
.child-right-1,
.child-right-2,
.child-right-3,
.child-right-4 {
  position: absolute;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  }

.child-right-1,
.child-right-2,
.child-right-3,
.child-right-4 {
  margin-left: 50vw;
}

.left,
.right {
  position: relative;
  width: 50vw;
  height: 20vh;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
}

.child-left-1,
.child-right-1 {
  z-index: 2;

  .left {
    background-image: url('https://images.unsplash.com/photo-1482625974755-1fccd66c1ceb?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }

  .right {
    background-image: url('https://images.unsplash.com/photo-1497380297067-185ce1f97bf9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }
}

.child-left-2,
.child-right-2 {
  z-index: 4;

  .left {
    background-image: url('https://images.unsplash.com/photo-1497380297067-185ce1f97bf9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }

  .right {
    background-image: url('https://images.unsplash.com/photo-1492762075047-0ef7e7a7816e?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=&bg=');
  }
}

.child-left-3,
.child-right-3 {
  z-index: 8;

  .left {
    background-image: url('https://images.unsplash.com/photo-1492762075047-0ef7e7a7816e?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=&bg=');
  }

  .right {
    background-image: url('https://images.unsplash.com/photo-1456610981819-586798dc53e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }
}

.child-left-4,
.child-right-4 {
  z-index: 10;

  .left {
    background-image: url('https://images.unsplash.com/photo-1456610981819-586798dc53e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }

  .right {
    background-image: url('https://images.unsplash.com/photo-1489395023347-f154a1b4a54e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=');
  }
}

.button-left,
.button-right {
  width: 100px;
  height: 50px;
  background: #1b1b1b;
  z-index: 20;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: skewX(-6deg);
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  padding-top: 14px;
  transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  cursor: pointer;
  // -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);
  // -moz-box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);
  // box-shadow: 0 0 25px 0 rgba(0,0,0,0.75);

  &:before {
    content: '';
    position: absolute;
    overflow: hidden;
    top: 25px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100px;
    z-index: -1;
    height: 0;
    background: #fff;
    color: #1b1b1b;
    transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }

  &:hover {
    &:before {
      top: 0;
      height: 50px;
      padding-top: 14px;
    }
  }

  .view {
    color: #fff;
    mix-blend-mode: difference;
    z-index: 20;
  }
}

.button-left {
  margin-left: 19vw;
}

.button-right {
  margin-left: 69vw;
}

.l1{
width: 60vw;
}

.r1{
  width: 40vw ;
  margin-left: 60vw;
}

.l2{
width: 40vw;
}

.r2{
  width: 60vw ;
  margin-left: 40vw;
}
.rr{
  width: 60vw;
}

.cl1{
  width: 100vw;
}

.cr1{
  width: 0vw ;
  margin-left: 100vw;
}

.cl2{
width: 0vw;
}

.cr2{
  width: 100vw ;
  margin-left: 0vw;
}
.crr{
  width: 100vw;
}

.close{
  position: absolute;
  z-index: 30;
  width: 80px;
  height: 80px;
  background: #1b1b1b;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  cursor: pointer;

  span{
    display: block;
    position: absolute;
    width: 60px;
    height: 1px;
    background: #fff;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
  }

  .lin1{
    transform-origin: center;
    transform: rotate(45deg);
  }
  .lin2{
    transform-origin: center;
    transform: rotate(-45deg);
  }

  &:hover{
    background: #fff;
    span{
      background: #000;
    }
  }
}

.scroll-indicator{
  width: 2px;
      position: absolute;
      height: 85px;
      background: #fff;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin-top: 95vh;
      margin-left: auto;
      margin-right: auto;
      z-index: 50;
      opacity: 1;
      transition: .4s;
      animation: ani 1s linear infinite;
}

@keyframes ani {
  0%{
    height: 0px;
  }

  25%{
    height: 85px;
  }

  55%{
    height: 85px;
  }

  100%{
    transform-origin: bottom;
    transform: scaleY(0);
  }
}


.scroll{
  font-family: 'Roboto', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #fff;
    text-align: center;
    margin-top: 91vh;
    font-weight: 300;
    font-style: oblique;
    z-index: 50;
    opacity: 1;
    transition: .4s;
}

.opa{
  opacity: 0;
}