鼠标滚轮与元素动画平滑滚动

Question

我有一些代码：

var rellax = new Rellax('.rellax',{
  center: false,
  wrapper: null,
  round: true,
  vertical: true,
  horizontal: false
});


// TweenMax
$(function(){
	
	var $window = $(window);		//Window object
	
	var scrollTime = 1.2;			//Scroll time
	var scrollDistance = 170;		//Distance. Use smaller value for shorter scroll and greater value for longer scroll
		
	$window.on("mousewheel DOMMouseScroll", function(event){
		
		event.preventDefault();	
										
		var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
		var scrollTop = $window.scrollTop();
		var finalScroll = scrollTop - parseInt(delta*scrollDistance);
    
    //console.log(finalScroll);
      
      $('.leaf>img').css({ 'transform' : 'rotateX(0deg)' });
      //$('.leaf>img').removeClass('rotate');
			
		TweenMax.to($window, scrollTime, {
          scrollTo : { y: finalScroll, autoKill:true },
          ease: Power1.easeOut,	
          autoKill: true,
          overwrite: 5,
          onComplete: function() {
            $('.leaf>img').css({ 'transform' : 'rotateX(50deg)' });
            //$('.leaf').addClass('rotate');
          }
        });
					
	});
	
});

// MouseWheel
// if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
// window.onmousewheel = document.onmousewheel = wheel;

// function wheel(event) {
//     var delta = 0;
//     if (event.wheelDelta) delta = event.wheelDelta / 220;
//     else if (event.detail) delta = -event.detail / 3;

//     handle(delta);
//     if (event.preventDefault) event.preventDefault();
//     event.returnValue = false;
// }

// var goUp = true;
// var end = null;
// var interval = null;

// function handle(delta) {
// 	var animationInterval = 20; //lower is faster
//     var scrollSpeed = 20; //lower is faster

// 	if (end == null) {
//   	end = $(window).scrollTop();
//   }
//   end -= 20 * delta;
//   goUp = delta > 0;

//   if (interval == null) {
//     interval = setInterval(function () {
//       var scrollTop = $(window).scrollTop();
//       var step = Math.round((end - scrollTop) / scrollSpeed);
//       if (scrollTop <= 0 || 
//           scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
//           goUp && step > -1 || 
//           !goUp && step < 1 ) {
//         clearInterval(interval);
//         interval = null;
//         end = null;
//       }
//       $(window).scrollTop(scrollTop + step );
//     }, animationInterval);
//   }
// }

* {box-sizing: border-box;}

html,
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size:20px;
  line-height: 2rem;
  
  position: relative;
}


img {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin:50% 50%;
  transform-style: preserve-3d;
  
  transition: all .5s ease-in-out;
}

main {
  padding: 2rem 3rem;
  text-align: center; 
}

.leaf {
  display: block;
  user-select: none;
  font-size: 0;
  visibility: visible;
  opacity: 1;
  width: 20vw;
  
  -webkit-perspective: 500px;
  perspective: 500px;
  
}

/* .rotate {
  animation: rotate 1s ease-in-out;
}


@keyframes rotate {
  from { transform: rotateX(0deg); }
  50% {transform: rotateX(50deg);}
  to { transform: rotateX(0deg); }
} */

.l-2 {
  margin-left: 30%;
}
.l-3 {
  margin-left: 70%;
}

header {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: auto;
  margin-top: -10%;
  
  -webkit-perspective: 500px;
  perspective: 500px;
}

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.7.1/rellax.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

<header id="scene">

  <span data-rellax-speed="-2" data-rellax-percentage="0.5" class="rellax leaf l-1">
    <img src="https://pics.clipartpng.com/midle/Leaf_PNG_Clip_Art-1968.png" alt="" >
  </span>

  <span data-rellax-speed="-3" data-rellax-percentage="0.5" class="rellax leaf l-2">
    <img src="https://png2.kisspng.com/20180201/pye/kisspng-maple-leaf-clip-art-maple-leaf-5a72a608f0a8c5.3016083115174630489858.png" alt="" >
  </span>

  <span data-rellax-speed="-1" data-rellax-percentage="0.75" class="rellax leaf l-3">
    <img src="https://www.freeiconspng.com/uploads/green-leaf-png-9.png" alt="" >
  </span>

</header>
<main>
  <h1>Smooth Scroll</h1>
  <h2>Use your mousewheel to scroll</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus, facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint, ipsa incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae earum eligendi! Est, quae, aliquam?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum, ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt eveniet.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui repellendus ducimus eum veritatis neque impedit odio quibusdam.
  </p>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur natus, facere nulla similique doloremque! Ullam voluptatem debitis esse. Deleniti quas, vel ad consectetur facilis ab consequatur voluptate aut optio odit nisi reprehenderit sint, ipsa incidunt itaque id voluptatum repudiandae alias esse velit quo voluptatibus recusandae earum eligendi! Est, quae, aliquam?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, earum ullam hic id! Corporis cupiditate, voluptatibus eligendi suscipit ratione eos, sequi aperiam voluptatem laboriosam! Debitis consectetur eum aperiam similique ullam dolore, labore porro, sequi fuga atque, tempora, est delectus veniam! Ad tempora, voluptas cupiditate praesentium illo iure. Cupiditate, necessitatibus natus id eius nulla ab suscipit tempora nisi itaque omnis quas, voluptates accusantium cum labore nam. Laboriosam alias doloremque quos adipisci pariatur ipsum doloribus et cupiditate omnis cum, ducimus deleniti, sequi optio harum! Iste quas in, qui nobis voluptatibus quibusdam doloremque culpa, numquam officia incidunt, quidem! Asperiores omnis amet incidunt eveniet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium animi sint officiis, voluptate nam vitae inventore minus aliquid temporibus soluta natus, qui repellendus ducimus eum veritatis neque impedit odio quibusdam.
    </p>
</main>

我的页面滚动流畅，并且element (leaft) with parallax effect。

为了平滑滚动，我尝试使用鼠标滚轮，或者这是tweenMax的有效版本（我无法选择哪个选项更好）。

在传单的视差期间，动态生成必要的变换：translate3d (...)。

我想，当滚动停止时，叶子的旋转开始以某种方式停止，从而使滚轮停止滚动（此时分页时间将通过动画自身滚动）。

示例brontidebg.com，我都希望如此，但使用jquery会容易得多。

问题：

如何使用鼠标滚轮在滚动结束后立即开始叶子动画（rotateX(...)，即，使图形的旋转与end的动画重合？在{{ 1}}。