Using ScrollMagic to fade text

Question

Here is my markup:

<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>

Here is my 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

As it is right now, the animation does nothing (I am a ScrollMagic() newb). I am just wanting to achieve an effect where when you scroll, the first section's text fades out and when you scroll the next section into view it's content fades in.

Excuse my ignorance with ScrollMagic() and parallax, I am a complete newb with parallax

Answer 1

You can try TweenMax.fromTo function.