javascript - ScrollMagic を使用してテキストをフェードする

Question

ここに私のマークアップがあります:

<section class="main1">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-4">
                <h1>It starts with an <span class="yellow">idea</span></h1>
                <p>But it’s the experience of a team of multi-disciplinary professionals that transforms those ideas into a realities.</p>
            </div>
        </div>
    </div>
</section>

<section class="main2">
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <h1>MAKING <span class="yellow">IDEAS</span> A REALITY IS WHAT WE DO</h1>
                <p>Arciplex has the team and experience necessary to guide and assure your ideas become a reality</p>
            </div>
        </div>
    </div>
</section>

これが私のJavaScript（CoffeeScript）です：

ready = ->
    $body = $('body')

    if $body.is '.home'
        controller = new ScrollMagic({globalSceneOptions: {triggerHook: "onEnter", duration: $(window).height()*2}})

        new ScrollScene({ triggerElement: ".main1" })
        .setTween(TweenMax.from(".main1", 1,
              top: "-80%"
              ease: Linear.easeNone
        )).addTo(controller)

        new ScrollScene({ triggerElement: ".main2" })
        .setTween(TweenMax.from(".main2", 2,
              top: "-80%"
              ease: Linear.easeNone
        )).addTo(controller)


$(document).ready ready
$(document).on 'page:load', ready

今のところ、アニメーションは何もしません (私はScrollMagic()初心者です)。スクロールすると最初のセクションのテキストがフェードアウトし、次のセクションをスクロールするとコンテンツがフェードインするという効果を実現したいと思っています。

視差と無知ですみません、ScrollMagic()私は視差の完全な初心者です

Answer 1

TweenMax.fromTo関数を試すことができます。