[Animation Y possition bugging on small screens]

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!

[Animation lagging sometimes]

Thanks so much! Very helpfully.

[Animation lagging sometimes]

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

[Animation lagging sometimes]

Thanks for the help.

 

Delay before first animation helps me.

Can i disable animate in smartphones?

[Animation lagging sometimes]

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?

[Animation lagging sometimes]

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!

[Animation lagging sometimes]

Hello guys, this animation freezing sometimes.

 

Something wrong?

Can i do this better?

See the Pen xOPpro by anon (@anon) on CodePen

[Lagging animation on mobile.]

I can disable animation in mobile? How i can do this?

Thanks for the help.

[Lagging animation on mobile.]

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

See the Pen by (@) on CodePen