CODEWITHSUNDEEP
jquerycssanimationgsap
Rohit Girdhar
Rohit Girdhar

Reputation: 353

TweenMax Animating before ScrollMagic

TweenMax running before ScrollMagic

I am trying to make the header shrink in size on scrolling through the page using TweenMax and ScrollMagic but the animation is triggering without waiting for the Scroll.

Here is my code:

$(document).ready(function(){
    var header = $('header')

    //init the controller
    var controller = new ScrollMagic.Controller();
    var tween = TweenMax.to(header ,1 ,{height: 100});
    var scene = new ScrollMagic.Scene({
        triggerElement: header
    })
    .setTween(tween)
    .addTo(controller);
});
body {
  margin: 0;
  padding: 0;
  background-color: #e95849;
  font-family: sans-serif;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  float: right;
  color: #000;
  padding: 20px 10px;
}

header {
  background-color: #fff;
  height: 150px;
  position: fixed;
  width: 100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <header>
        <nav>
            <ul id="animate">
                <li>ABOUT</li>
                <li>WORK</li>
                <li>DESIGN</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>

    <div style="height: 2000px"></div>

I have also the scripts in the following order -

  1. Jquery
  2. TweenMax
  3. ScrollMagic

Upvotes: 1

Views: 590

Answers (1)

Johannes
Johannes

Reputation: 67798

The script is triggered because the header element is already at the trigger position (= the top of the viewport). Add offset: 1 to the scene - this will cause it to wait until you scroll down at least one pixel. (change that value to whatever you like)

$(document).ready(function(){
    var header = $('header')

    //init the controller
    var controller = new ScrollMagic.Controller();
    var tween = TweenMax.to(header ,1 ,{height: 100});
    var scene = new ScrollMagic.Scene({
        triggerElement: header,
        offset: 1
    })
    .setTween(tween)
    .addTo(controller);
});
body {
  margin: 0;
  padding: 0;
  background-color: #e95849;
  font-family: sans-serif;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  float: right;
  color: #000;
  padding: 20px 10px;
}

header {
  background-color: #fff;
  height: 150px;
  position: fixed;
  width: 100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
    <header>
        <nav>
            <ul id="animate">
                <li>ABOUT</li>
                <li>WORK</li>
                <li>DESIGN</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>

    <div style="height: 2000px"></div>

Upvotes: 1

Related Questions