I have a question for you. How would you make this react element, fade in on view?
 {
  return (
    
      I'm Fading in
    
  );
};
`}
language="tsx"
showLineNumbers={true}

/>
The Traditional Approach

  You'd create CSS styles for fading, handle state changes, and
  use the
  IntersectionObserver API. It's effective but
  requires several steps and can get a bit verbose.




 First, Create the fade in style





  Then wrap the element in a parent that checks its visibility state and fades it in if it's visible.

 {

  const [isVisible, setIsVisible] = useState(false);

  return (
    
      
        
      
    
  );
};
`}
language="tsx"
showLineNumbers={true}

/>


  To trigger the state change when the element mounts, **`useEffect`** is needed
  with a reference to the target element:


 {

  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    // Handle it when in view
    setIsVisible(!isVisible);
  }, [ref]);

  return (
    
      
        
      
    
  );
};
`}
  language="tsx"
  showLineNumbers={true}
/>

  But you don't need the state to change when the element mounts, instead you want
  it to fade in when it comes in view, to make it happen I'll be using the
  **`IntersectionObserver`** API which basically detects when an element comes
  into or goes out of view within the browser's viewport

 {
        if (entry.isIntersecting) {
            // make the element invisible;
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.5 } /* trigger when at least 50% of the observed
       element is visible in the viewport. */
    );
`}
  language="tsx"
  showLineNumbers={true}
/>

With this setup, the component is ready to gracefully fade in.
 {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const current = ref.current;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(!isVisible);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.5 }
    );
    if (current) {
      observer.observe(current);
    }
    return () => {
      if (current) {
        observer.unobserve(current);
      }
    };
  }, [ref]);

  return (
    
      
        
      
    
  );
};

export default Component;
const FadingText: React.FC = () => {
  return (
    
      I'm Fading in
    
  );
};
`}
  language="tsx"
  showLineNumbers={true}
/>
Resulting in


  A bit cumbersome for a subtle fade-in effect. Look how much of work that took.
   Now I'll be doing the same except this time with
  Framer Motion

Using Framer
 {
  return (
    
      
    
  );
};
`}
  language="tsx"
  showLineNumbers={true}
/>


  Now all I have to do is to turn any HTML element into a motion element, in this case it's on the
  component's surrounding **``div``**. And then just add some props provided by framer.

 {
  return (
     
      
        
      
      {// the rest of the page}
    
  );
};
`}
  language="tsx"
  showLineNumbers={true}
/>

  Clean, easy and efficient.


Yeet Me

  Creating this **`YeetMe`** component would have been really hard with plain
  CSS & JS




Here's the code for it 

      
        yeet me
      
    
  );
}
`}
  language="tsx"
  showLineNumbers={true}
/>


  These are just a couple of examples, the library offers more features and
  options for creating sophisticated animations. You can check out the
  docs for more info.
Unclassified, raw

Frontend Performance
