Slow Animations

[dawoodtrumboo]

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

 

[Toso]

not sure about the duration problem but I'm sure you need to add the context function since you are using React , it helps with so many things I would really recommend reading the docs and adding it, maybe it fix it 

 

 

https://gsap.com/resources/React#gsapcontext-is-your-best-friend

 

https://gsap.com/docs/v3/GSAP/gsap.context()

 

 

also please consider adding a small demo so it gives a better idea about the problem 

 

 

 

 

[dawoodtrumboo]

Does the context optimize the animation rendering?
Here is the link to the demo

Demo

[Rodrigo]

Hi,

 

GSAP Context most likely won't make a lot of difference when it comes to the jaggy animation. Most likely that's related to browser rendering more than anything else. You could try using will-change: transform in the element being animated, perhaps ale the image as smaller as possible and be sure that the image is compressed as much as possible as well. Again none of those issues are GSAP related.

 

As @Toso points GSAP Context solves the issue of React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too.

 

.from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing.

 

For example, let's say el.x is 0 and you do this: 

useEffect(() => {
  // what happens if this gets called twice?
  gsap.from(el, {x: 100})
}, []);

 

The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)!  See the issue?

 

In GSAP 3.11, we introduced a new gsap.context() feature that solves all of this for you. All you need to do is wrap your code in a context call, and then return a cleanup function that reverts things: 

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

 

One of the React team members chimed in here if you'd like more background.

 

Happy Tweening!