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

I would reccomend this script - http://mynameismatthieu.com/WOW/ its great for triggering animations when the user comes into the viewport — ajmajmajma, Nov 13 '14 at 04:23
Your code looks fine. Have a look at the console to see wether the top values of your elements are actually changing (I suspect they do but the element is not positioned relative or absolute). Also have a look at the ScrollMagic Support Guidelines: https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md — Jan Paepke, Nov 25 '14 at 12:38

score 0 · Answer 1 · answered May 08 '15 at 15:54

0

You can try TweenMax.fromTo function.

answered May 08 '15 at 15:54

hayatbiralem

649
8
15

Using ScrollMagic to fade text

1 Answers1