Search the Community

So I have created a component transition animation which works perfectly fine on local machine but when i deploy the website on vercel, the animation is very slow. Is there some way to optimize the animation? import React,{useEffect}from 'react' import { useNavigate } from 'react-router-dom'; import { locationBg } from '../../assets' import useLocationContext from '../../hooks/useLocationContext'; import { gsap } from 'gsap'; import MobileFrame from './MobileFrame'; const Location = () => { const navigate = useNavigate(); // Destructing variables from the Location Context const { data,setData, setHasSearched, setInputValue, setSelectedCountry } = useLocationContext(); useEffect(() => { const tl = gsap.timeline(); // Animate the Location component tl.fromTo('.LocationAnimationClass', { opacity: 50, y: 1200 }, // From { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } // To ); // Animate the MobileFrame component tl.fromTo('.MobileFrameClass', { x: '-600%', opacity: 20 }, { x: '0%', opacity: 1, duration: 1.8, ease: 'bounce.out' }, '+=0.2' ); tl.fromTo('.ButtonAnimationClass', { y: '400%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1, ease: 'bounce.out' }, '+=0.2' ); }, []); // This useEffect is used for handling error on the location page useEffect(() => { if (!data) { navigate('/'); } return () => { setHasSearched(false); }; }, [data, navigate, setHasSearched]); // This function is handling the reset Button const handleReset = () => { setData(null) setSelectedCountry(null) setInputValue(null); navigate('/'); } return ( <> <div className='LocationAnimationClass overflow-hidden relative h-screen flex flex-col gap-[30px] md:gap-[40px] xl:gap-[20px] 2xl:gap-[90px] justify-center items-center bg-cover bg-center' style={{backgroundImage: `url(${locationBg})`}}> <div className='bg-black w-full h-full bg-opacity-30 absolute top-0 left-0'></div> <div className='MobileFrameClass'> <MobileFrame/> </div> <button className="ButtonAnimationClass bg-[#33c2cc] px-10 py-3 rounded-full font-noto-sans font-semibold text-3xl z-10 text-white" onClick={handleReset} > Reset </button> </div> </> ) } export default Location

Hi! First-time poster, please let me know if I can do anything to improve future questions. In the attached pen, I'm tweening the card title to follow the cursor on mouseover. In isolation, it works as I would expect. However, the behaviour changes dramatically when any arbitrary tween is applied to the card containing the title. I often encounter similar difficulty to avoid undesired effects, as well as issues with things like stacking context. I think I'm missing something critical about where, when and how to create and use multiple tweens correctly. Any guidance would be much appreciated.

I made a small website to play a slide with external rss, news and photos. I use a small computer like raspberry and launch Chrome in kiosk mode. I can do without animation (tl.set) but It's better with GSAP ;¬) My current problem is the image transform with a bad painting effect Here is a pen to show the problem : I made a screenshot on the small computer : http://ibb.co/bLVSUc It's better in live but this is the glitch effect. Can I reduce this, using protips ? I use a Odroid xu4 with a mali GPU and 8 CPU are not at 100% (50% max).

Hi everybody, for now, I'm using the requestAnimationFrame function. Is this way the most optimized way ? It looks like this way use a lot of the browser ressources. Thank you var currentMousePos = { x: 0, y: 0 }, mousePos = { x : 0}, myvar; document.addEventListener("mousemove", function(event){ currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); function raf() { my_raf = requestAnimationFrame(raf); mouse.x = myvar; TweenMax.to(mousePos, 0.3, { x: currentMousePos.x, onUpdate: function () { myvar = mousePos.x; }, ease: Linear.easeNone }); }

Hello, I used TweenLite and TimelineLite for a game project based on pixijs for graphics part. I did memory test on chrome and realised that when I create use tween / timeline for my sprites I have have leap sawtooth. Is there any pooling mecanism in the lib in order to reuse the tweens when there animation is complete. Cheers,

Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.