I tried to include the Fade function in the following elements, but I was not successful. The default shown on the site is this .
I want to apply this to the <p>
tag for when I scroll and go through them, they increase the font, or fade-in . But I can not figure out how it works.
HTML
<section data-slide="2" id="acqua">
<h1>Papel Interfolhado<div class="ball"><img class="papel" src="img/papel.png"/></div></h1>
<div id="descricao">
<p>O papel toalha Safira tem qualidade <br/>e maciez comprovada.</p>
<p>O guardanapo de papel Safira <br/>é ultra-absorvente</p>
<p>É macio e foi feito pensando <br/>na consciência ambiental e na <br/>preservação do meio ambiente</p>
</div>
</section>
JS
$(document).ready(function($) {
// build tween
var tween = TweenMax.fromTo("#animate2", 0.5,
{"border-top": "0px solid white"},
{"border-top": "30px solid white", backgroundColor: "blue", scale: 0.7}
);
// build scene
var scene = new ScrollScene({triggerElement: "#trigger2", duration: 300})
.setTween(tween)
.addTo(controller);
// show indicators (requires debug extension)
scene.addIndicators();
});
JSFiddle .