Jump to content
Search Community

Lagging animation on mobile.

nofpowells test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately is hard to see what the issue is or could be with the information you have provided. Please be a bit more specific about what are the problems you're facing and if it's possible create a reduced live-sample in order to get a better grasp of what part of the site is giving you the problems, because is simpler and faster to see that than a complete website. Check this post in order to see how to create a codepen sample that we can look at:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 1
Link to comment
Share on other sites

Hello nofpowells,

 

Scrolling animations can use a lot of the CPU, especially on Mobile. Especially CSS box-shadow which is really expensive to paint.

 

Looks like you are using ScrollMagic. That is made with GSAP, but that ScrollMagic plugin was created and maintained by Jan Paepke located here:

 

https://github.com/janpaepke

 

And his ScrollMagic git page:

 

https://github.com/janpaepke/ScrollMagic

 

We are happy to help, but like Rodrigo advised, a codepen demo would be better so we can see your code live and in an editable environment.

 

 

Thanks :)

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

I have the same issue.. On mobile and chrome also  shows some flickering issues and no rendering it properly. Most of the portion manage with 'x' and 'y' value.

like this

.from(".step_5_bottom_left_img", 1.2, {
            y: '-300%'
        }, "2")
        .from("p.step_5_left_3", 1, {
            y: '-600%'
        }, "1")
        .from("p.step_5_left_4", .5, {
            y: '-700%'

        }, "1") 

Link to comment
Share on other sites

Hi arunts66 and welcome to the GreenSock forums,

 

There really isn't anything we can do with the small snippet of code you provided. We would need to actually see the flickering you are talking about to be able to troubleshoot. The best thing to do is provide a reduced test case in CodePen. This way we can  see the problem, experiment with a solution and provide a clear answer.

 

Also, it is better to start a new topic so that we can focus on your issue without bothering other folks. Thanks!

  • Like 2
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...