SuperScrollOrama 및 TweenMax 페이드 인 및 페이 아웃 스크롤

Question

페이지를 아래로 스크롤 할 때 페이드 인/아웃하려고하는 일련의 컬러 DIV가 있습니다.

사업부는의에 대한 나의 설정은 간단하다 :

여기

<div class="wrapper"> 
     <div id="content" class="clearfix"> 
      <div class="box alpha"></div> 
      <div class="box beta"></div> 
      <div class="box gamma last"></div> 
      <div class="box delta"></div> 
      <div class="box epsilon"></div> 
      <div class="box zeta last"></div> 
     </div> 
    </div> 

내 superscrollorama/tweenmax 스크립트입니다 : 당신이 페이지를 아래로 스크롤

var controller = $.superscrollorama(); 
controller.addTween('.box.alpha', TweenMax.from($('.box.alpha'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 400); 
controller.addTween('.box.alpha', TweenMax.to($('.box.alpha'), 1, {css:{opacity: .2}}), 1600); 
controller.addTween('.box.beta', TweenMax.from($('.box.beta'), 1, {css:{opacity: .2}}), 1600); 
controller.addTween('.box.beta', TweenMax.to($('.box.beta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 2400); 
controller.addTween('.box.gamma', TweenMax.from($('.box.gamma'), 1, {css:{opacity: .2}}), 2400); 
controller.addTween('.box.gamma', TweenMax.to($('.box.gamma'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 3200); 
controller.addTween('.box.delta', TweenMax.from($('.box.delta'), 1, {css:{opacity: .2}}), 3200); 
controller.addTween('.box.delta', TweenMax.to($('.box.delta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4000); 
controller.addTween('.box.epsilon', TweenMax.from($('.box.epsilon'), 1, {css:{opacity: .2}}), 4000); 
controller.addTween('.box.epsilon', TweenMax.to($('.box.epsilon'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4800); 
controller.addTween('.box.zeta', TweenMax.from($('.box.zeta'), 1, {css:{opacity: .2}}), 4800); 
controller.addTween('.box.zeta', TweenMax.to($('.box.zeta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 5600); 

모든 것이 페이드 인,하지만 난에 상자를 원하는가 다음 상자가 페이드 인하는 동안 페이드 아웃, 나는 아마 잘못하고 있지만 나는 많은 문서를 찾을 수 없다. http://emptywalrus.com/scroll/

Answer 1

당신은 Timeline을 만들어야합니다

는 여기에 내가 뭘하는지입니다. 여기 내 프로젝트 중 하나에서 방금 한 것과 동일한 샘플이 있습니다.

controller.addTween(
    '#the-problem', 
    (new TimelineLite()) 
     .append([ 
      TweenMax.fromTo($('#the-problem .animation-heading'), 1, 
       { delay: 0.3, css: { right: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.3, css: { right: 0 }, ease: Expo.easeInOut }), 
      TweenMax.fromTo($('#the-problem .animation-text'), 1, 
       { delay: 0.1, css: { right: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.1, css: { right: 0 }, ease: Expo.easeInOut }), 
      TweenMax.fromTo($('#the-problem .animation-image'), 1, 
       { delay: 0.1, css: { left: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.1, css: { left: 0 }, ease: Expo.easeInOut }) 
     ]), 700, -400); 

controller.addTween(
    '#the-solution', 
    (new TimelineLite()) 
     .append([ 
      TweenMax.fromTo($('#the-solution .animation-heading'), 1, 
       { delay: 0.3, css: { left: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.3, css: { left: 0 }, ease: Expo.easeInOut }), 
      TweenMax.fromTo($('#the-solution .animation-text'), 1, 
       { delay: 0.1, css: { left: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.1, css: { left: 0 }, ease: Expo.easeInOut }), 
      TweenMax.fromTo($('#the-solution .animation-image'), 1, 
       { delay: 0.1, css: { right: -1500 }, ease: Expo.easeInOut }, 
       { delay: 0.1, css: { right: 0 }, ease: Expo.easeInOut }) 
     ]), 700, -400);