ScrollMagic Demos - Animation Trigger

index.html

<header>
  <div class="container">
    <div class="col-md-8 col-md-offset-2">
      <h1>
        <i class="fa fa-heart"></i>
        ScrollMagic Demos
        <i class="fa fa-magic"></i>
      </h1>
      <hr>
      <h2>Animation Trigger</h2>
      <p class="lead">This example shows how to trigger a basic animation when you hit a certain point using the GreenSock Animation Platform.</p>
    </div>
  </div>
  <i class="fa fa-angle-double-down"></i>
</header>



<main><div class="container">


  
  
  <div class="row"><!-- where the animation starts -->
    
    <div class="col-md-6 col-md-offset-3">
      <div class="wrap" id="scene">  
        <h2>Magic Happens Here</h2>
        <div id="animation"><i class="fa fa-heart"></i></div>
      </div>
    </div>
    
  </div>
    
    
    
    

</div></main>

script.js

// When the DOM is ready
$(function() {
  
  // Init ScrollMagic Controller
  var scrollMagicController = new ScrollMagic();
  
  // Create Animation for 0.5s
  var tween = TweenMax.to('#animation', 0.5, {
    backgroundColor: 'rgb(255, 39, 46)',
    scale: 5,
    rotation: 360
  });
  
  // Create the Scene and trigger when visible
  var scene = new ScrollScene({
    triggerElement: '#scene',
    offset: 150 /* offset the trigger 150px below #scene's top */
  })
  .setTween(tween)
  .addTo(scrollMagicController);
  
  // Add debug indicators fixed on right side
   scene.addIndicators();
  
});

ScrollMagic-Demos---Animation-Trigger.markdown

ScrollMagic Demos - Animation Trigger

This example shows how to trigger a basic animation when you hit a certain point using the GreenSock Animation Platform.

A Pen by Nicholas Cerminara on CodePen.

License.

style.css

/*

Full Tutorial: http://scotch.io/tutorials/building-
interactive-scrolling-websites-with-scrollmagic-js

CodePen Collection: http://codepen.io/collection/XmearX/

/*

/* Ignore => Base Styles */
body { background: #e3e3e3; -webkit-font-smoothing: antialiased; }
.ScrollSceneIndicators { z-index: 9999999 !important; }

/* Ignore => Useless Header Styles */
header {
  text-align: center;
  background: rgb(0, 164, 213);
  padding: 50px 0 125px;
  color: #fff;
  position: relative;
}
header * { text-shadow: 0px 1px 1px rgba(150, 150, 150, 0.35); }
header h1 { margin-top: 0; font-size: 50px;  }
header h1 i.fa-heart { color: rgb(221, 75, 80); }
header h1 i.fa-magic { color: rgb(39, 97, 223); } 
header hr { max-width: 80px; border-top: solid 2px #fff; }
header h2 { margin-bottom: 30px; }
header p { margin-bottom: 0px; }
header i.fa-angle-double-down {
  font-size: 50px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #111;
}
header i.fa-angle-double-down:after {
  content: 'Start Scrolling Down';
  position: absolute;
  bottom: 100%;
  left: -35px;
  font-size: 15px;
  width: 104px;
}

/* Create huge scrolling area (imitates height of a page) */
main { padding: 200px 0 1500px 0; overflow: hidden; }

/* Styles for wrap for demo */
.wrap {
  text-align: center;
  background: #fff;
  padding: 50px 0;
  -moz-box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
  -webkit-box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
  box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
  position: relative;
}

/* Default Animation Styles */
#animation {
  background: #000;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  margin: 50px auto;
  position: relative;
}
#animation i {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}