ScrollMagicのトリガー付近を前後させた場合の動きが不自然になってしまいます

Question

ScrollMagicを使って、ある要素がトリガーに達したらフェードインし、
離れたらフェードアウトするようなページを作ろうとしています。
以下のようなコードで実装を行ってみました。
要素がトリガーに達したらaddClassし、離れたらremoveClassをして、
フェードイン・フェードアウトを実装しようとしています。

	var scene = new ScrollMagic.Scene({
        triggerElement: "#sample",
        duration :400
    })
    .on("enter" , function(e)
    	$('#sample .hoge').addClass('active');
    	$('#sample .hoge').removeClass('out');
    })
    .on("leave" , function(e){
	$('#sample .hoge').removeClass('active');
    	$('#sample .hoge').addClass('out');
	})
    .addIndicators()
    .addTo(controller);

//fade
@-webkit-keyframes fade{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
//fade
@-webkit-keyframes fadeout{
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeout{
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.hoge{
	opacity:0;
	&.active{
		-webkit-animation: fade 1s ease 0.7s 1 forwards;
		animation: fade 1s ease 0.7s 1 forwards;
	}
	&.out{
		opacity: 1;
		-webkit-animation: fadeout 1s ease 0.7s 1 forwards;
		animation: fadeout 1s ease 0.7s 1 forwards;
	}
}

<div id='sample'>
	<div class='hoge'>
		フェードイン・フェードアウトする要素
	</div>
</div>

ゆっくりスクロールしていくと、期待通りにうまく動作するのですが、早くサーッとスクロールすると、
アニメーションが動かず、要素がパッと表示されてしまいます。

addClassとremoveClassの切り替えが早すぎてうまく動いてないのかもしれませんが、いい解決策のアイディアもなく困っています。
良いお知恵を拝借できないものかと投稿させていただきます。よろしくお願いします。

---

2017/02/10追記
debug.addIndicators.jsを使って詳しくみていると、
トリガーとなる要素のスタートやエンド付近をスクロールで前後させるとうまくいかないようです…。