Hello, i'm making this web site using tweenmax and ScrollMagic.
But have issues on mobile and some times in Desktops too.
Site: teste.sheepsystems.com.br/engenharia.html
I'm making mistake here?
Have a better way to do this?
new ScrollMagic.Scene({triggerElement: "#home", duration: $("#home").height()})
.setClassToggle("#menuHome", "active")
.addTo(controllerMenu);
new ScrollMagic.Scene({triggerElement: "#missao", duration: $("#missao").height()})
.setClassToggle("#menuMissao", "active")
.addTo(controllerMenu);
new ScrollMagic.Scene({triggerElement: "#portfolio", duration: $("#portfolio").height()})
.setClassToggle("#menuPortfolio", "active")
.addTo(controllerMenu);
new ScrollMagic.Scene({triggerElement: "#parceiros", duration: $("#parceiros").height()})
.setClassToggle("#menuParceiros", "active")
.addTo(controllerMenu);
new ScrollMagic.Scene({triggerElement: "#contato", duration: $("#contato").height()})
.setClassToggle("#menuContato", "active")
.addTo(controllerMenu);
$(document).on("click", "a[href^=#]", function(e) {
var id = $(this).attr("href");
if($(id).length > 0) {
e.preventDefault();
controllerMenu.scrollTo(id);
}
});
/*-----------Fim navegação menu*/
/*---Animação Sessão Home*/
TweenMax.from($(".faixa"),2,{opacity:0,scaleY:0, ease: SlowMo.easeIn});
TweenMax.from($(".faixa>hr"), 4,{opacity:0, scaleX:0, ease: SlowMo.easeIn, delay:1});
TweenMax.from($(".faixa>p:first"), 3,{opacity:0, y:-80,scale:0 , ease: Circ.easeOut, delay:2});
TweenMax.from($(".faixa>h1"), 2,{opacity:0,scale:0,padding:30,top:-100, ease: SlowMo.easeIn, delay:1});
TweenMax.from($(".faixa .artTexto"), 3,{opacity:0, y:15});
/*----------------------------------------Fim Animação Sessão Home */
/*Animação Sessão Missão*/
var controllerMissao = new ScrollMagic.Controller();
var cartaoImg = new TweenMax.from("#cartaoImg",2,{opacity:0, x:'-100%', ease: SlowMo.easeIn});
var cartaoMissao = new TweenMax.from("#cartaoMissao",3,{opacity:0, x:'-100%', ease: SlowMo.easeIn, delay:1.5});
var tituloMissao = new TweenMax.staggerFrom("#cartaoMissao>h1, #cartaoMissao>hr, #cartaoMissao>p",2,{y:50,opacity:0, ease: SlowMo.easeIn, delay:1.5},0.5);
new ScrollMagic.Scene({triggerElement:"#missao"})
.setTween(cartaoImg)
.addTo(controllerMissao);
new ScrollMagic.Scene({triggerElement:"#missao"})
.setTween(cartaoMissao)
.addTo(controllerMissao);
new ScrollMagic.Scene({triggerElement:"#missao"})
.setTween(tituloMissao)
.addTo(controllerMissao);
/*-----------Fim Animação Sessão Missão*/
/*Animação Sessão Portfolio*/
var controllerPortfolio = new ScrollMagic.Controller();
var tituloPortfolio = new TweenMax.staggerFrom(".titulo-portfolio>h1, .titulo-portfolio>hr",1,{y:50,opacity:0, ease: SlowMo.easeIn},0.5);
var imagensPortfolio = new TweenMax.staggerFrom(".portfolioContainer .box", 1,{y:300,opacity:0,ease: Ease.easeIn, delay:1},0.3);
new ScrollMagic.Scene({triggerElement: "#portfolio"})
.setTween(tituloPortfolio)
.addTo(controllerPortfolio);
new ScrollMagic.Scene({triggerElement: "#portfolio"})
.setTween(imagensPortfolio)
.addTo(controllerPortfolio);
/*Fim Animação Sessão Portfolio*/
/*Animação Sessão Parceiros*/
var controllerParceiros = new ScrollMagic.Controller();
var tituloParceiros = new TweenMax.staggerFrom(".titulo-parceiros>h1, .titulo-parceiros>hr",1,{y:50,opacity:0, ease: SlowMo.easeIn},0.5);
var logoParceiros = new TweenMax.staggerFromTo(".parceiros-logo",1,{y:'200%',opacity:0},{opacity:1,boxShadow: "0px 0px 2px 1px #6c0000",y:'0%', ease: SlowMo.easeInOut},0.2);
new ScrollMagic.Scene({triggerElement:"#parceiros"})
.setTween(tituloParceiros)
.addTo(controllerParceiros);
new ScrollMagic.Scene({triggerElement:"#parceiros"})
.setTween(logoParceiros)
.addTo(controllerParceiros);
Sorry for my bad english. Thanks!!!