Search the Community

Hi there, hope everyone is doing well I've an issue using gsap, scrollTrigger to be more specific for smooth scrolling (horizontal and vertical) currently everything is working well. The only issue i'm having is the lag that can be hardly noticed at the start of the page on desktop, but its really noticed on mobile. Here is the website link: https://beyond-the-veil.vercel.app Here is my code bellow, i've sent my whole code because it is really simple that work for vertical (mobile) and horizontal (desktop) and i'm having a bit of lag on both, thanks in advance for whoever helps. import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const HorizontalScrollComponent = () => { const component = useRef(); const slider = useRef(null); const [isVerticalScroll, setIsVerticalScroll] = useState(false); useEffect(() => { const handleResize = () => { if (window.innerWidth < 1024) { setIsVerticalScroll(true); } else { setIsVerticalScroll(false); } }; window.addEventListener("resize", handleResize); handleResize(); // Initial check return () => { window.removeEventListener("resize", handleResize); }; }, []); useEffect(() => { // Target the container element to be scrolled const container = slider.current; const panels = gsap.utils.toArray(".panel"); const scrollDirection = isVerticalScroll ? "y" : "x"; const scrollSize = panels.reduce( (acc, panel) => acc + (isVerticalScroll ? panel.offsetHeight : panel.offsetWidth), 0 ); gsap.to(panels, { [scrollDirection]: () => -scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"], ease: "linear", scrollTrigger: { trigger: container, pin: true, scrub: isVerticalScroll ? 2 : 3.5, start: "top top", end: `+=${ scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"] }`, }, }); // Clean up ScrollTrigger when the component unmounts return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill(true)); }; }, [isVerticalScroll]); return ( <> <div ref={component}> <div ref={slider} className="app flex flex-col h-[100vh] w-[100vw] lg:flex-row lg:flex-nowrap lg:overflow-hidden" > <div id="header" className="panel w-full lg:h-[100vh] -z-[10] relative" > <LandingPage /> </div> <div id="tracking" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Tracking /> </div> <div id="investigating" className="panel lg:h-[100vh] sbg-blue-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Investigating /> </div> <div id="revealing" className="panel lg:h-[100vh] sbg-green-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Revealing /> </div> <div id="unveiling" className="panel lg:h-[100vh] sbg-purple-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Unveiling /> </div> <div id="footer" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Footer /> </div> </div> </div> </> ); }; export default HorizontalScrollComponent;

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?