Tentei incluir a função de Fade nos seguintes elementos, porém não tive sucesso. O default que mostrado no site é este.
Quero aplicar isso a tag <p>
para quando eu der scroll e passar por elas, elas aumentem a fonte, ou deem fade-in. Mas não estou conseguindo entender como funciona
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();
});