nofpowells

Hello guys! I'm using TweenMax.from('.form-contact',1.5, {opacity:0, y:40, x:30,ease: SlowMo.easeIn}); But you can see on image a white rect on all page. This white rect match a initial position from my '.form-contact'. This white rect desapear when animation end to new positon. I'm tried overflow: hidden but fails. The only way a can do is setting ".form-contact' display: none; and when animation start i set display: block; This is the only way? Thanks!

Thanks so much! Very helpfully.

How i can do this Rodrigo? And thanks for the help!

Thanks for the help. Delay before first animation helps me. Can i disable animate in smartphones?

A found the error and a possible solutioon. This animation start when i load page, so that animation load toggether the entire page. Possible solution: 1sec delay before first animation. This is correct?

In Code Pen is more fluid, but on my page using(firefox/chrome) on windows and smartphone not totally fluid. OBS: In chrome is more fluid than Firefox, on windows, but on mobile both browser freezing during animation. I will modify with TimeLine. Thanks! Sorry for my english!

Hello guys, this animation freezing sometimes. Something wrong? Can i do this better?

I can disable animation in mobile? How i can do this? Thanks for the help.

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!!!