$(document).ready(function(){
// Init ScrollMagic
var controller = new ScrollMagic.Controller();
// loop through each .product_details elements to animate product overview
$('.product').each(function(){
var tl = new TimelineLite();
var idx = $(this).data('idx');
var pos = $(this).data('pos');
if (!idx) return;
var pdt_img =".pdt_img"+idx;
var pdt_title =".pdt_title"+idx;
var pdt_content =".pdt_content"+idx;
var pdt_benefits =".pdt_benefits"+idx;
if ( $(window).width() < 748) {
tl.add(TweenMax.staggerFromTo(pdt_content, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenLite.fromTo(pdt_img, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenMax.staggerFromTo(pdt_title, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
tl.add(TweenMax.staggerFromTo(pdt_benefits, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
}
else {
// build timeline to animate product overview
if (pos && pos=="right") {
tl.add(TweenMax.staggerFromTo(pdt_content, 1, {x:-100}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenLite.fromTo(pdt_img, 1, {x:200}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenMax.staggerFromTo(pdt_title, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
tl.add(TweenMax.staggerFromTo(pdt_benefits, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
}
else {
tl.add(TweenMax.staggerFromTo(pdt_content, 1, {x:100}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenLite.fromTo(pdt_img, 1, {x:-200}, {className: "+=fade-in", x:0, ease:"Circ.easeOut"}));
tl.add(TweenMax.staggerFromTo(pdt_title, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
tl.add(TweenMax.staggerFromTo(pdt_benefits, 1, {x:-30}, {className: "+=fade-in", x:0, ease:"Power1.easeOut"}, 0.2));
};
tl.timeScale( 1.5 ); //sets timeScale to half-speed
}
// build scene to animate product overview
var Ourscene = new ScrollMagic.Scene({
triggerElement: this.children[0],
triggerHook: 0.6,
reverse:false,
})
.setTween(tl)
/* .addIndicators({name: "product"}) // add indicators (requires plugin)*/
.addTo(controller);
});
// loop through each .project element
$('.project').each(function(){
// build a scene
var ourScene = new ScrollMagic.Scene({
triggerElement: this.children[0],
triggerHook: 0.7
})
.setClassToggle(this, 'fade-in') // add class to project01
/* .addIndicators({
name: 'fade scene',
colorTrigger: 'black',
colorStart: '#75C695',
colorEnd: 'pink'
}) // this requires a plugin
*/
.addTo(controller);
});
//jQuery for page scrolling up from footer - requires jQuery Easing plugin
$(function() {
$('.sep_block_up a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
});