Search the Community

Hi Guys. We got some feedback from our customers that some of our Pan Zoom effect become very laggy, jerky since we updated to gsap3 from tweenmax 1.18.3. I put an example together which shows clearly the situation. (In the real life example is much more complex) so i tried to build up similar structure like in our plugin. TweenMax 1.18.3 example: https://codepen.io/themepunch/pen/WNvGZXj GSAP3 example : https://codepen.io/themepunch/pen/vYOXJrQ It is extrem if you scale on transform origin left/top or right/bottom. You can check how the pixels are "jumping" on gsap3 and how smooth it is on TweenMax. Maybe i just missing something , or is there any idea what goes wrong? Thanks a lot guys and really appreciate all your effort, help and hard work !

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

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